Partial change on parent hover, full change on element hover - html

Question

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 1

The problem is that the rule #parent:hover #child has higher priority than #child:hover because it describes more elements in the DOM tree.
For increasing the priority of #child:hover there are two ways:
Describe it more precisely with
#parent #child:hover
Add !important to opacity: 1:
opacity: 1 !important;
Fiddle
#parent {
width: 200px;
height: 200px;
background-color: black;
}
#child {
width: 100px;
height: 100px;
background-color: white;
opacity: 0.3;
}
#parent:hover #child {
opacity: 0.6;
}
#parent #child:hover {
opacity: 1;
}
<div id="parent">
<div id="child">
</div> <!-- end child -->
</div> <!-- end parent -->
PS: You might also want to add a transition.

Answer 2

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/

Answer 3

Add transitions
#child {
width: 100px;
height: 100px;
background-color: white;
opacity: 0.3;
/* added these */
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
}