HTML Element Style How to - Change background of one row and when any cell in the same row is hovered

Question

We would like to know how to change background of one row and when any cell in the same row is hovered.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {<!--from  w  ww. j a v a 2 s. c  om-->
  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: