悬停时HTML表格突出显示行(第一行除外)(标题)

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

全部，

我有一个呈现到HTML表的ASP.NET GridView。

1
2
3
4
5

当鼠标悬停在该行上时，我想突出显示该行-除了第一行是标题之外。

我只是对JQuery有所了解，并且对CSS(CSS2或CSS3)有些涉猎。有没有首选的方法可以做到这一点？

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

干杯

安德兹

有一种方法可以实现所需的行为，而无需分别对每行进行分类。以下是使用CSS :not和:first-child选择器突出显示悬停的第一个表头(标题)以外的每个表行的方法：

1
2
3

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

不幸的是，IE <9不支持:not，因此要以跨浏览器的方式执行此操作，可以使用以下代码：

1
2
3
4
5
6

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

基本上，第一个CSS规则包括所有行。为避免突出显示第一行，可通过使用tr:first-child选择然后将其background-color保持为白色(或任何未突出显示的颜色)来覆盖其悬停样式。

我希望也能提供帮助！

相关讨论

无疑，要扩展user2458978的答案，最好的方法是正确地编写表。

1
2
3
4
5
6
7
8
9

然后CSS就是

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

这是一个jsFiddle示例

相关讨论

您可以使用CSS :hover说明符执行此操作。这是一个演示：

1
2
3
4
5

CSS：

1
2
3

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

相关讨论

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

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

3.使用以下CSS

1
2
3

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

相关讨论

在第一行使用TH标签，然后执行以下操作：

1 2	th { background-color:#fff;

} ??

对于所有其他行：

1
2
3

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

或

1
2
3

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

为什么不简单使用

1
2
3
4

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

这只会影响内部带有td的表行，而不会影响内部带有th的表行。
在所有浏览器中均可使用。大家好，

相关讨论

使用jQuery将类添加到td的父元素(不选择th)

1
2
3
4
5

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

然后添加CSS类

1
2
3

.highlight {
background:red;
}

相关讨论

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

因此，此答案可能不适用于上述问题。

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

我的答案是：

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

为什么不这样：

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