Is it possible to hover over a nested child element without triggering a hover on the parent element?
In the example below you'll see that when you hover over the child, the parent hover effect is still also active.
I'd like to change this so that, when you hover over the child element, the parent returns to its "un-hovered" state.
Is this possible with CSS?
body {
font-family: sans-serif;
}
div {
padding: 1em;
margin: 1em;
border: 1px solid #ccc;
}
.close {
display: none;
float: right;
}
.parent:hover > .close {
display: inline-block;
}
.child:hover > .close {
display: inline-block;
}
<div class="parent">
<a href="" class="close">Close parent</a>
This is the parent
<div class="child">
<a href="" class="close">Close child</a>
This is the child
</div>
</div>