Effect How to - Change background of one element and all its children when it is hovered

Question

We would like to know how to change background of one element and all its children when it is hovered.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {<!--from   ww w .  java2 s .  co m-->
  border: 1px solid black;
}

div {
  background-color: red;
}

tr:hover * {
  background-color: green;
}
</style>
</head>
<body>
  <table>
    <tr>
      <td>
        <div>Test1</div>
      </td>
      <td>
        <div>Test2</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Test3</div>
      </td>
      <td>
        <div>Test4</div>
      </td>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: