除第一行(标题)外,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)稍微涉足了一下.有没有一种首选的方法呢？

任何人都可以给我一个起点吗？

干杯

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为白色(或任何非突出显示的行的颜色)来覆盖其悬停样式.

我希望这也有帮助!

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

这是一个jsFiddle示例

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