JeffThompson JeffThompson - 6 months ago 16
HTML Question

Partial change on parent hover, full change on element hover

I'd like to have a UI element fade in slightly when hovering on its parent div, then fade in completely when hovering on the UI element itself. But it seems that if I set the parent hover, hovering on the child doesn't do anything.

HTML:

<div id="parent">
<div id="child">
</div> <!-- end child -->
</div> <!-- end parent -->


CSS:

#parent {
width: 200px;
height: 200px;
background-color: black;
}

#child {
width: 100px;
height: 100px;
background-color: white;
opacity: 0.3;
}

/* fades in partially, looks nice */
#parent:hover #child {
opacity: 0.6;
}

/* doesn't seem to do anything! */
#child:hover {
opacity: 1;
}


JSFiddle version

Answer

It's a specificity issue. The #parent:hover #child selector is "winning out" over #child:hover. Change the second to #parent:hover #child:hover (or just #parent #child:hover), and you should be set. https://jsfiddle.net/1khjo42q/1/

Comments