CSS tutorial > CSS tables > Change row background color on hover

Change row background color on hover

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #C2C2FF;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #9999FF;
        color: #fff;
      }
      tr:hover { background-color: #E0E0FF; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Name</th><th>Surname</th><th>Role in the family</th></tr>
      <tr><td>Homer</td><td>Simpson</td><td>Father</td></tr>
      <tr><td>Marge</td><td>Simpson</td><td>Mother</td></tr>
      <tr><td>Bart</td><td>Simpson</td><td>Son</td></tr>
      <tr><td>Lisa</td><td>Simpson</td><td>Daughter</td></tr>
    </table>
  </body>
</html>

Result:

Edit the code listed above and click the "GO" button to view the result.