41

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

10 Answers 10

83

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!

5
  • Thanks, I do like this solution also. +1
    – Andez
    Commented Aug 15, 2012 at 8:32
  • 15
    Mind that this won't work where the markup is <table> <thead><th>foo</th> ... </thead> <tbody> <tr>bar</tr> ... </tbody> </table>. If that's your markup use - much simpler - tbody tr:hover selector.
    – koniu
    Commented Mar 23, 2015 at 8:39
  • That is better answer. Thanks, it works for me very well.
    – kevin
    Commented Dec 27, 2017 at 6:08
  • Doesn't work if you use tables with <thead></thead>
    – HippoDuck
    Commented May 16, 2018 at 14:38
  • This is better than the answer above it, but the answer below is better yet. Some day we'll get there :)
    – user736893
    Commented Nov 29, 2019 at 19:14
55

To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.

<table>
<thead>
    <tr><th></th></tr>
</thead>
<tbody>
    <tr><td></td></tr>
    <tr><td></td></tr>
</tbody>
</table>

Then the CSS is simply

table tbody tr:hover { background-color: red; }

Here's a jsFiddle example

3
  • How can I make it by using class name? I added class name -jsfiddle.net/bzamfir/2c2jU - but now the highlight is no longer working. Thanks for help
    – bzamfir
    Commented Feb 28, 2014 at 22:10
  • 2
    Sorry - might be too late now. The CSS in your Fiddle example is slightly off, .hover table tbody tr:hover { background-color: red; } should just be .hover tbody tr:hover { background-color: red; } as the table is not a child element of the element with the class .hover
    – Morvael
    Commented Mar 11, 2014 at 11:28
  • 3
    This is the correct way to have a table and thus this is the best answer.
    – HippoDuck
    Commented May 16, 2018 at 14:37
21

You can do this using the CSS :hover specifier. Here's a demonstration:

<table>
    <tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
    <tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
    <tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>

CSS:

.notfirst:hover {
    background-color: red;
}
10
  • Yeah, I thought about this - css class on each row except for the first one. Was hoping there was some sort of advanced CSS to do this. Cheers
    – Andez
    Commented Aug 10, 2012 at 10:48
  • @Andez Actually there is a way to do without specifying a class to each row. Please take a look at my new answer.
    – Chris
    Commented Aug 10, 2012 at 13:01
  • -1, you should be specifying the row not to be affected to hover, not specifying n number of rows that should.
    – scrowler
    Commented May 29, 2014 at 2:57
  • @scrowler this was only one of the two solutions I had provided. See second answer.
    – Chris
    Commented May 29, 2014 at 17:05
  • @Chris fair enough, I see that. I've +1'd your other answer.
    – scrowler
    Commented May 29, 2014 at 20:55
12

1. Place header tr inside thead tag

2. Place other tr inside tbody tag

3. Use following css

table tr:not(thead):hover {
    background-color: #B0E2FF;
}
2
  • 11
    This did it for me: table tbody tr:hover { background-color: #B0E2FF; }
    – egallardo
    Commented Aug 23, 2013 at 3:33
  • :not(thead) is fine as jQuery selector but neither chromium nor firefox seem too impressed. table tbody tr:hover works just fine however - good comment.
    – koniu
    Commented Mar 23, 2015 at 8:31
3

Use TH tag for first row and do that:

th {
background-color:#fff;

}

For all others rows:

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

or

tr:hover td {
    background-color:#eee;
}
0
2

Use jQuery to add a class to the parent element of the td (wont select th)

$('td').hover(function(){
   $(this).parent().addClass('highlight');
}, function() {
   $(this).parent().removeClass('highlight');
});

Then add the CSS class

.highlight {
   background:red;
}
3
  • 4
    From the question it seems like he wants to learn a bit of jQuery that's why I'm using it, personally I wouldn't downvote an answer that would enhance someones knowledge even if you see it as overkill but hey whatever floats your boat.
    – user818991
    Commented Aug 9, 2012 at 10:09
  • I'm gonna +1 that thanks - more information. Wouldn't say overkill - a useful insight.
    – Andez
    Commented Aug 9, 2012 at 10:23
  • That would be very bad for people to copy paste this in their code. CSS is the proper way to go using :hover and :first-child. Overkill; Commented Jan 9, 2019 at 19:48
2

Why not simply use

tr>td:hover {
/* hover effect */
background-color: lightblue;
}

This will only affect table rows with td's inside, not table rows with th's inside. Works in all browsers. Cheers, guys.

1
  • 2
    This would highlight the single cells, while I think it would be better to highlight the entire row while hovering over any cell of it.
    – umbe1987
    Commented Dec 5, 2018 at 16:53
0

Why not something like:

tr:first-child ~ tr { background-color:#fff; }
0

As of my requirement, I have to highlight all the even rows except header row.

Hence, this answer might not be suitable to the above question.

Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.

My answer is:

$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
0

If your table is standard, you have a table like this:

<table>
    <thead>
        <tr>
            <th>title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>cell</th>
        </tr>
    </tbody>
</table>

so you can use this css code:

table > *:not(thead) tr:hover{
    background-color: #f5f5f5;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.