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

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 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 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

我希望这也有帮助！

原文由 Chris 发布，翻译遵循 CC BY-SA 3.0 许可协议