HTML table highlight row on hover except first row (header)

Question

All,

I have an ASP.NET GridView that is rendered to an HTML table.

<table>
    <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
    <tr><td>Data 1</td><td>Data 2</td></tr>
    <tr><td>Data 3</td><td>Data 4</td></tr>
</table>

I want to highlight the row when the mouse is hovered over it - except for the first row which is the header.

I am just getting my head wet with JQuery, and have dabbled a bit with CSS (either CSS2 or CSS3). Is there a preferred way to do this?

Can anyone give me a starting point for this?

Cheers

Andez

Answer 1

There is a way to achieve the desired behavior without class-ing each row separately. Here's how to highlight each table row except for first one (header) on hover using the CSS :not and :first-child selectors:

tr:not(:first-child):hover {
    background-color: red;
}

Unfortunately, IE < 9 does not support :not, so to do this in a cross-browser way, you can use something like this:

tr:hover {
    background-color: red;
}
tr:first-child:hover {
    background-color: white;
}

Basically, the first CSS rule includes all rows. To avoid highlighting the first row, you override the its hover style by selecting with tr:first-child and then keeping its background-color to white (or whatever the non-highlighted row's color is).

I hope that helped, too!