Effect How to - Change child when hovering parent

Question

We would like to know how to change child when hovering parent.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#parent {<!--   w  w  w  .j  av  a  2 s.c om-->
  background: red;
}

#child {
  background: blue;
}

#parent:hover #child { /* this works */
  background: green;
}

#child:hover #parent { /* this does not work */
  background: yellow;
}
</style>
</head>
<body>
  <div id="parent">
    Parent
    <div id="child">Child</div>
  </div>
</body>
</html>

The code above is rendered as follows: