HTML Element Style How to - Hover over parent li to make child li color white and vice versa

Question

We would like to know how to hover over parent li to make child li color white and vice versa.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
li:hover {<!--from  w w w .  j  a  va  2  s.  c o m-->
  background-color: blue;
  color: white;
}
</style>
</head>
<body>
  <ul>
    <li>one
      <ul>
        <li>test</li>
      </ul>
    </li>
    <li>two</li>
    <li>three</li>
  </ul>
</body>
</html>

The code above is rendered as follows: