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.
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!