HTML表格悬停高亮行，除了第一行（标题）

Question

大家好，

我有一个ASP.NET GridView，它会渲染成HTML表格。

<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>

我想在鼠标悬停在行上时突出显示该行，但第一行是标题，不需要突出显示。

我刚开始接触 JQuery，并稍微涉猎了一下 CSS（CSS2 或 CSS3）。 有没有更好的方法来实现这个效果？

有人可以给我一个起点吗？

Cheers

Andez

- Andez

Answer 1

有一种方法可以在不为每个表格行单独添加类的情况下实现所需的行为。以下是使用CSS :not和:first-child选择器，在悬停时突出显示除第一行（标题）之外的每一行：

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

很遗憾，IE < 9不支持:not选择器，因此为了跨浏览器实现这个功能，你可以使用类似这样的方法:

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

基本上，第一个CSS规则包括所有行。为了避免高亮显示第一行，您可以通过选择tr:first-child并保持其background-color为白色（或任何未高亮显示行的颜色）来覆盖其悬停样式。

我也希望这有所帮助！

- Chris

---

谢谢，我也喜欢这个解决方案。+1 - Andez

注意，这种方法不适用于标记为 <table> <thead><th>foo</th> ... </thead> <tbody> <tr>bar</tr> ... </tbody> </table> 的情况。如果你的标记是这样的，请使用更简单的 tbody tr:hover 选择器。 - koniu

这是更好的答案。谢谢，它对我非常有效。 - kevin

如果您使用带有<thead></thead>的表格，则无法正常工作。 - user2924019

这个答案比上面的好，但下面的答案更好。总有一天我们会到达那里的 :) - user736893

Answer 2

进一步扩展用户2458978的答案，无疑最好的方法是正确编码表格。

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

然后CSS就很简单了

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

这里是一个jsFiddle的例子

- Morvael

---

我该如何使用类名来实现它？我添加了类名-http://jsfiddle.net/bzamfir/2c2jU/，但现在高亮显示不再起作用。谢谢帮助。 - bzamfir

抱歉 - 或许现在太晚了。你的 Fiddle 示例中的 CSS 有些问题，.hover table tbody tr:hover { background-color: red; } 应该改为 .hover tbody tr:hover { background-color: red; }，因为表格并不是具有类名 .hover 的元素的子元素。 - Morvael

这是摆放桌子的正确方式，因此这是最佳答案。 - user2924019

Answer 3

您可以使用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：

.notfirst:hover {
    background-color: red;
}

- Chris

---

是的，我考虑过这个问题 - 每行都有CSS类，除了第一行。希望有一些高级的CSS可以做到这一点。干杯 - Andez

@Chris，好的，我明白了。我已经点赞了你的另一个回答。 - scrowler

在标记中为所有行添加额外的类，但标题太混乱了。下面有更干净、更好的解决方案。 - koniu

@koniu 我明白你的意思，但我的目标不是发表观点，而是提供各种解决方案的指引。就清晰度而言，我理解并同意。不幸的是，HTML和CSS标准及其实现的现状并不支持你所提到的分离关注点的明确模型（我也是一个大粉丝）。 - Chris

@Chris - 我不确定你所说的“HTML和CSS标准及实现的现状并不支持你提到的关注点分离的明确模型”是什么意思，但是<thead>和<tbody>难道不是将第一行与其余部分分开吗？请参见此答案。在OP的问题中，第一行是一个标题行（<th />单元格）。 - Morvael

Answer 4

1. 将表头tr标签放在thead标签内

2. 将其他行tr标签放在tbody标签内

3. 使用以下CSS：

table tr:not(thead):hover {
    background-color: #B0E2FF;
}

- user2458978

---

这个代码让我成功了：table tbody tr:hover { background-color: #B0E2FF; }。 - egallardo

":not(thead)"作为jQuery选择器还不错，但是Chromium和Firefox似乎并不太满意。然而，"table tbody tr:hover"却完全可以正常工作 - 很好的评论。 - koniu

Answer 5

使用TH标签作为第一行，并按照以下方式进行操作：

th {
background-color:#fff;

}

For all others rows:

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

或者

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

- phsaires

Answer 6

使用jQuery向td的父元素添加一个类（不会选择th）。

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

然后添加CSS类

.highlight {
   background:red;
}

- user818991

---

从这个问题中看来，他似乎想学习一些jQuery，所以我在使用它，就我个人而言，即使你认为这有点过度，我也不会对能增进某人知识的答案进行负评，但无论怎样都可以。 - user818991

我会点赞并感谢你提供更多信息。不会说过度 - 这是一个有用的见解。 - Andez

这样在代码中复制粘贴是非常不好的。使用CSS的:hover和:first-child是正确的方法。过度杀伤； - Alexis Paques

Answer 7

为什么不直接使用？

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

这将仅影响包含'td'的表格行，而不会影响包含'th'的表格行。适用于所有浏览器。恭喜，伙计们。

- Lars Tuff

---

这将会突出显示单个单元格，但我认为悬停在任何一个单元格上时，突出显示整行会更好。 - umbe1987

Answer 8

根据我的需求，我必须突出显示除标题行以外的所有偶数行。

因此，这个答案可能不适用于上面的问题。

即使如此，我还是带着希望在这里给出我的答案，如果其他人在搜索引擎中遇到这个页面，他们可以使用我的答案。

我的答案是：

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

- Ashok kumar

Answer 9

如果您的表是标准的，那么您会有这样一张表：

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

所以您可以使用以下CSS代码：

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

- Saeed sdns

Answer 10

为什么不用类似这样的代码：

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

- user3174546