title: Highlight two table rows on hover with CSS
body: <p>Changing the background color of a row in a table on mouse over is pretty simple using CSS:</p>
  
  <pre><code>.HighlightableRow:hover
  {
    background-color: lightgray;
  }
  </code></pre>
  
  <p>And some HTML:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr class=HighlightableRow&gt;
      &lt;td&gt;Cell 1&lt;/td&gt;
      &lt;td&gt;Cell 2&lt;/td&gt;
      &lt;td&gt;Cell 3&lt;/td&gt;
    &lt;tr&gt;
    &lt;tr class=HighlightableRow&gt;
      &lt;td&gt;Cell 1&lt;/td&gt;
      &lt;td&gt;Cell 2&lt;/td&gt;
      &lt;td&gt;Cell 3&lt;/td&gt;
    &lt;tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>