36

全部，

我有一个呈现到 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）有所涉猎。有没有首选的方法来做到这一点？

谁能给我一个起点？

干杯

安德斯

4

10 回答 10

81

有一种方法可以实现所需的行为，而无需单独对每一行进行分类。以下是如何使用 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为避免突出显示第一行，您可以通过选择 with然后将其保持background-color为白色（或任何未突出显示的行的颜色）来覆盖其悬停样式。

我希望这也有帮助！

于 2012-08-10T13:06:50.043 回答
49

要扩展 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; }

这是一个 jsFiddle 示例

于 2013-08-13T13:17:32.720 回答
19

您可以使用 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;
}
于 2012-08-09T10:03:49.700 回答
12

1.将标题 tr 放在 thead 标记内

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

3.使用以下 CSS

table tr:not(thead):hover {
    background-color: #B0E2FF;
}
于 2013-06-06T09:46:21.573 回答
3

对第一行使用 TH 标签并执行以下操作：

th {
background-color:#fff;

}

对于所有其他行：

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

或者

tr:hover td {
    background-color:#eee;
}
于 2013-04-30T19:45:04.043 回答
2

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

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

然后添加 CSS 类

.highlight {
   background:red;
}
于 2012-08-09T10:04:42.330 回答
2

为什么不简单地使用

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

这只会影响内部有 td 的表格行，而不影响内部有 th 的表格行。适用于所有浏览器。干杯，伙计们。

于 2018-11-22T23:57:33.723 回答
0

为什么不这样：

tr:first-child ~ tr { background-color:#fff; }
于 2014-01-08T18:10:19.577 回答
0

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

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

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

我的回答是：

$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
于 2014-12-31T09:20:20.473 回答
0

如果你的表是标准的，你有一个像这样的表：

<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;
}
于 2022-01-17T17:01:16.190 回答