Highlight two table rows on hover with CSS

Question

Changing the background color of a row in a table on mouse over is pretty simple using CSS:

.HighlightableRow:hover
{
  background-color: lightgray;
}

And some HTML:

<table>
  <tr class=HighlightableRow>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  <tr>
  <tr class=HighlightableRow>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  <tr>
</table>

Occasionally, I want to highlight a pair of rows when I hover my mouse over either of them. For example, when displaying a list of work orders in a table, I would have one row with the creator, date created, urgency, etc. and the second row would have an except of the work that was requested.

Is there any way, other than using the JavaScript onmouseover/onmouseout event handlers, to create this effect like the one shown above? Preferably using CSS.

Answer 1

Use the tbody element to group rows.

tbody:hover { background:#eee;}

HTML:

<table>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World!</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World!</td>
    </tr>
  </tbody>
</table>

Check out the details about "tbody", "thead" and "tfoot" for the correct usage.