HTML表格在悬停时突出显示除第一行（标题）之外的行

Posted 2023-03-06

【中文标题】HTML表格在悬停时突出显示除第一行（标题）之外的行

【英文标题】：HTML table highlight row on hover except first row (header)

【发布时间】：2012-08-06 12:42:37

【问题描述】：

全部，

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

谁能给我一个起点？

干杯

安德斯

【参考方案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;

【讨论】：

是的，我想到了这个 - 除了第一行之外，每一行都有 css 类。希望有某种高级 CSS 来做到这一点。干杯

@Andez 实际上有一种方法可以不用为每一行指定一个类。请看看我的新答案。

-1，您应该指定行 not 将受到影响以悬停，而不是指定 n 行数应该。

@scrowler 这只是我提供的两个解决方案之一。见第二个答案。

@Chris 很公平，我明白了。我已经 +1 了你的其他答案。

【参考方案2】：

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

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

然后添加 CSS 类

.highlight 
   background:red;

【讨论】：

从问题来看，他似乎想学习一点 jQuery，这就是我使用它的原因，我个人不会拒绝一个可以提高某人知识的答案，即使你认为它是矫枉过正的但是，嘿，不管你的船是什么。

我会 +1 表示感谢 - 更多信息。不会说矫枉过正 - 一个有用的见解。

这对于人们将其复制粘贴到他们的代码中是非常糟糕的。 CSS 是使用:hover 和:first-child 的正确方法。矫枉过正;

【参考方案3】：

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

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

很遗憾，IE :not，所以要以跨浏览器的方式执行此操作，您可以使用如下方式：

tr:hover 
    background-color: red;

tr:first-child:hover 
    background-color: white;

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

我希望这也有帮助！

【讨论】：

谢谢，我也喜欢这个解决方案。 +1

请注意，如果标记为 <table> <thead><th>foo</th> ... </thead> <tbody> <tr>bar</tr> ... </tbody> </table>，这将不起作用。如果这是您的标记用途 - 更简单 - tbody tr:hover 选择器。

那是更好的答案。谢谢，它对我很有效。

如果您使用带有<thead></thead> 的表，则不起作用

这比上面的答案好，但下面的答案更好。总有一天我们会到达那里:)

【参考方案4】：

在第一行使用 TH 标签并这样做：

th 
background-color:#fff;

对于所有其他行：

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

或

tr:hover td 
    background-color:#eee;

【参考方案5】：

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

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

3. 使用下面的css

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

【讨论】：

这是为我做的：table tbody tr:hover background-color: #B0E2FF;

:not(thead) 可以作为 jQuery 选择器使用，但 chromium 和 firefox 似乎都没有给人留下深刻的印象。 table tbody tr:hover 工作得很好但是 - 很好的评论。

【参考方案6】：

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

【讨论】：

如何使用类名来实现？我添加了类名 -jsfiddle.net/bzamfir/2c2jU - 但现在高亮不再起作用。感谢您的帮助

抱歉 - 现在可能为时已晚。您的 Fiddle 示例中的 CSS 稍有偏差， .hover table tbody tr:hover background-color: red; 应该只是 .hover tbody tr:hover background-color: red; 因为 table 不是 .hover 类元素的子元素

这是拥有一张桌子的正确方法，因此这是最好的答案。

【参考方案7】：

为什么不这样：

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

【参考方案8】：

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

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

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

我的回答是：

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

【参考方案9】：

为什么不简单地使用

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

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

【讨论】：

这将突出显示单个单元格，而我认为在将鼠标悬停在其中的任何单元格上时突出显示整行会更好。

【参考方案10】：

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

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