JeffThompson JeffThompson - 5 months ago 10
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.


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


#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


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.