悬停时 HTML 表格突出显示除第一行（标题）之外的行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11880892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML table highlight row on hover except first row (header)
提问by Andez
All,
全部，
I have an ASP.NET GridView that is rendered to an HTML table.
我有一个呈现到 HTML 表的 ASP.NET GridView。
<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?
我刚开始接触 JQuery，并涉足了一些 CSS（CSS2 或 CSS3）。有没有首选的方法来做到这一点？
Can anyone give me a starting point for this?
谁能给我一个起点？
Cheers
干杯
Andez
安德斯
采纳答案by Chris
You can do this using the CSS :hoverspecifier. Here's a demonstration:
您可以使用 CSS:hover说明符执行此操作。这是一个演示：
<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:
CSS：
.notfirst:hover {
background-color: red;
}
回答by Chris
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 :notand :first-childselectors:
有一种方法可以实现所需的行为，而无需分别对每一行进行分类。以下是使用 CSS:not和:first-child选择器在悬停时突出显示除第一个（标题）之外的每个表格行的方法：
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:
不幸的是，IE < 9 不支持:not，因此要以跨浏览器的方式执行此操作，您可以使用以下内容：
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-childand then keeping its background-colorto white (or whatever the non-highlighted row's color is).
基本上，第一个 CSS 规则包括所有行。为避免突出显示第一行，您可以通过选择 withtr:first-child然后将其保持background-color为白色（或任何未突出显示的行的颜色）来覆盖其悬停样式。
I hope that helped, too!
我希望这也有帮助！
回答by Morvael
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
要扩展 user2458978 的答案，最好的方法就是正确地对表格进行编码。
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
那么CSS就是简单的
table tbody tr:hover { background-color: red; }
回答by user2458978
1.Place header tr inside thead tag
1.将标题 tr 放在 thead 标签内
2.Place other tr inside tbody tag
2.将其他 tr 放在 tbody 标签内
3.Use following css
3.使用以下css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
回答by phsaires
Use TH tag for first row and do that:
对第一行使用 TH 标记并执行以下操作：
th {
background-color:#fff;
}
}
For all others rows:
对于所有其他行：
tr:not(:first-child):hover {
background-color:#eee;
}
or
或者
tr:hover td {
background-color:#eee;
}
回答by Oliver Millington
Use jQuery to add a class to the parent element of the td (wont select th)
使用jQuery向td的父元素添加一个类（不会选择th）
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
然后添加CSS类
.highlight {
background:red;
}
回答by Lars Tuff
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.
这只会影响带有 td 的表行，而不影响带有 th 的表行。适用于所有浏览器。干杯，伙计们。
回答by user3174546
Why not something like:
为什么不是这样的：
tr:first-child ~ tr { background-color:#fff; }
回答by Ashok kumar
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");
