Highlight rows in HTML table (hovered over row and preceding rows)

Question

Assuming an example table:

<table>
   <tr>
     <th>Head 1</th>
     <th>Head 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <tr>
      <td>Data 7</td>
      <td>Data 8</td>
    </tr>
</table>

I'm looking for the best technique to highlight the rows <= n, where n is the hovered over row (excluding the header row). For example, if the mouse is over

<tr>
  <td>Data 5</td>
  <td>Data 6</td>
</tr>

the following part of the table should be highlighted:

<tr>
  <td>Data 1</td>
  <td>Data 2</td>
</tr>
<tr>
  <td>Data 3</td>
  <td>Data 4</td>
</tr>
<tr>
  <td>Data 5</td>
  <td>Data 6</td>
</tr>

Any ideas how this effect could be achieved?

Answer 1

Basically, you could see the thing the opposite way : any tr after hovered tr should have no background: test this :

table:hover tr {
  background:gray;
}
table:hover tr:hover ~tr {
  background:none;
}

DEMO

---

=============== EDITED from request in comments ================

React only on last element in row.

BEWARE :This option doesn't allow to click in cells but last one of each row.

---

table {
  pointer-events:none;
}
table tr :last-child {
  pointer-events:auto;
  cursor: pointer;
}

Answer 2

Try this: (fiddle: http://jsfiddle.net/5SLN3/)

$('tr').hover(
    function(){
        $(this).addClass('hover').prevAll().addClass('hover');
    },
    function(){
        $(this).removeClass('hover').prevAll().removeClass('hover');
    }
)

and the style:

<style>
tr.hover td{background-color:#888}
</style>