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

Andez
  • 5,588
  • 20
  • 75
  • 116

10 Answers10

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!

Chris
  • 26,544
  • 5
  • 58
  • 71
54

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
Morvael
  • 3,478
  • 3
  • 36
  • 53
  • How can I make it by using class name? I added class name -http://jsfiddle.net/bzamfir/2c2jU/ - but now the highlight is no longer working. Thanks for help – bzamfir Feb 28 '14 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 Mar 11 '14 at 11:28
  • 3
    This is the correct way to have a table and thus this is the best answer. – user2924019 May 16 '18 at 14:37
20

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;
}
Chris
  • 26,544
  • 5
  • 58
  • 71
  • 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 Aug 10 '12 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 Aug 10 '12 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 May 29 '14 at 02:57
  • @scrowler this was only one of the two solutions I had provided. See second answer. – Chris May 29 '14 at 17:05
  • @Chris fair enough, I see that. I've +1'd your other answer. – scrowler May 29 '14 at 20:55
  • adding extra class in the markup to all the rows but header is so dirty dirty. far cleaner better solutions below – koniu Mar 23 '15 at 08:34
  • @koniu have you looked at [the other answer](http://stackoverflow.com/a/11902294/364869) I provided? – Chris Mar 24 '15 at 20:55
  • @koniu I get what you're saying, but my goal here isn't to be opinionated — just to provide pointers to various solutions. As far cleanliness goes, I understand **and agree**. The sad truth is that the state of HTML and CSS standards and implementations currently does *not* support the clear-cut model of separation of concerns that you alluded to (and I'm a big fan of). – Chris Mar 24 '15 at 20:57
  • @Chris - I'm not 100% sure what you meant by "The sad truth is that the state of HTML and CSS standards and implementations currently does not support the clear-cut model of separation of concerns that you alluded to" - but doesn't and separate the first row from the rest? [See this answer](http://stackoverflow.com/a/18210198/1286358). In the OP's question the first row is a header row ( cells) – Morvael Aug 26 '16 at 13:55
  • Not an ideal way to do it. Far better methods. – user2924019 May 16 '18 at 14:36
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;
}
scrowler
  • 24,273
  • 9
  • 60
  • 92
user2458978
  • 259
  • 3
  • 5
  • 11
    This did it for me: `table tbody tr:hover { background-color: #B0E2FF; }` – egallardo Aug 23 '13 at 03: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 Mar 23 '15 at 08: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;
}
phsaires
  • 2,188
  • 1
  • 14
  • 11
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;
}
  • 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. –  Aug 09 '12 at 10:09
  • I'm gonna +1 that thanks - more information. Wouldn't say overkill - a useful insight. – Andez Aug 09 '12 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; – Alexis Paques Jan 09 '19 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.

Lars Tuff
  • 127
  • 3
  • 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 Dec 05 '18 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");
Ashok kumar
  • 1,593
  • 4
  • 33
  • 68
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;
}
Saeed sdns
  • 804
  • 7
  • 17