Question

所有

我有一个呈现给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>

我希望在鼠标悬停在它上方时突出显示该行 - 除了第一行是标题。

我只是对JQuery感到厌烦，并且已经尝试了一些CSS（CSS2或CSS3）。有没有一种首选的方法呢？

有人能给我一个起点吗？

干杯

Andez

Answer 1

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

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

不幸的是，IE＆lt; 9不支持:not，所以要以跨浏览器的方式执行此操作，您可以使用以下内容：

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

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

我希望这也有帮助！

Answer 2

要扩展user2458978的答案，最好的方法是正确编码表格。

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

Here's a jsFiddle example

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

Answer 4

1.将标题tr放在thead标记

中

2.将其他tr放在tbody标签

中

3.使用以下css

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

Answer 5

使用jQuery将类添加到td的父元素（不会选择）

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

然后添加CSS类

.highlight {
   background:red;
}

Answer 6

在第一行使用TH标记并执行此操作：

th {
background-color:#fff;

}

对于所有其他行：

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

或

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

Answer 7

为什么不简单使用

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

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

Answer 8

为什么不能这样：

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

Answer 9

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

因此，这个答案可能不适合上述问题。

即便如此，我在这里给出了答案，希望有人在搜索引擎搜索中遇到此页面时可以使用我的答案。

我的回答是：

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

除第一行（标题）外，HTML表突出显示悬停行

9 个答案: