hover on different elements (CSS only solution) - html

Question

I'm having troubles on applying a hover effect on different HTML elements, such as changing the color of a DIV's border and it's parents DIV's background color.
My HTML code looks like this:
<div id="time-later">
<div class="time-arrow"></div>
<p>later</p>
</div>
The matching CSS code:
#time-later {
height: 35px;
width: calc(25% - (15px/4));
}
#time-later p {
display: block;
width: calc(100% - 14.5px);
margin-right: 14.5px;
}
#time-later .time-arrow {
float: right;
width: 0;
height: 0;
border-top: 17.5px solid transparent;
border-left: 14.5px solid green;
border-bottom: 17.5px solid transparent;
z-index: 1;
}
some styling
#time-later p {
text-align: center;
line-height: 35px;
background-color: green;
}
#time-later p:hover {
background-color: red;
}
#time-later p:active {
color: #FFF;
background-color: gray;
}
When I move the mouse over the #time-later element I want the background of the p-element and the border of the .arrow-element to be colored in the same color.
JSFiddle
Is there any CSS-only solution to achieve something like this? I know it would be easier to place an image instead, but I'm searching for a CSS-only solution. Thank you for your help!

Answer 1

Move :hover and :active to the parent element, then target the children as follows:
Example Here
#time-later:hover > p { background-color: red; }
#time-later:hover > .time-arrow { border-left-color: red; }
#time-later:active > p { background-color: gray; color: white; }
#time-later:active > .time-arrow { border-left-color: gray; }

Answer 2

JSBIN
Through modify their parent pseudo-style to handle what you want.
css
#time-later:hover p{
background-color: red;
}
#time-later:hover .time-arrow{
border-left: 14.5px solid red;
}
#time-later:active p {
color: #FFF;
background-color: gray;
}
#time-later:active .time-arrow{
border-left: 14.5px solid gray;
}

Answer 3

like this? http://jsfiddle.net/z0vm0nm4/1/
#time-later:hover p{
background-color: red;
}
#time-later:hover .time-arrow {
border-left: 14.5px solid red;
}

Answer 4

you can do hover on div
example:
div#time-later:hover .time-arrow{
border-top: 17.5px solid transparent;
border-left: 14.5px solid background:tan;
border-bottom: 17.5px solid transparent;
}
div#time-later:hover p{
background:tan;
}

Answer 5

try this one, worked for me:
/* some stylings */
#time-later p {
text-align: center;
line-height: 35px;
background-color: green;
}
#time-later:hover p {
background-color: red;
}
#time-later:active p {
color: #FFF;
background-color: gray;
}
#time-later:hover .time-arrow {
border-left: 14.5px solid red;
}
#time-later:active .time-arrow {
border-left: 14.5px solid gray;
}
http://jsfiddle.net/h50L9noy/