I'm dealing with a situation where I have two nested <div> elements.
<div class="parent">
<div class="child"></div>
</div>
The challenge here is that I want to change the background of the .parent element when hovering over it, but then revert it back to its original state when hovering over the .child element.
To clarify, I need the outer area (parent) to switch from gray to light blue on hover, but return to gray when the inner area (child) is hovered over:
.parent {
width: 100px;
height: 100px;
padding: 50px;
background: lightgray;
}
.parent:hover {
background: lightblue;
}
.child {
height: 100px;
width: 100px;
background: darkgray;
}
.child:hover {
background: lightblue;
}<div class="parent">
<div class="child"></div>
</div>I prefer to maintain this specific <div> structure and achieve the effect using only CSS without resorting to JavaScript.
This request is distinct from the common question of "how to style the parent when hovering over a child," as my goal is precisely not to style the parent when the child is being hovered over.