tr：悬停不工作答案

【问题标题】：tr:hover not workingtr：悬停不工作
【发布时间】：2011-11-22 13:40:48
【问题描述】：

当鼠标悬停在表格行上时，我试图突出显示（更改背景颜色）整行。我通过网络搜索，它应该工作，但它没有。我在 Chrome 上显示它。

<table class="list1">
<tr>
   <td>1</td><td>a</td>
</tr>
<tr>
   <td>2</td><td>b</td>
</tr>
<tr>
   <td>3</td><td>c</td>
</tr>
</table>

我的CSS：

.list1 tr:hover{
background-color:#fefefe;
}

正确的css应该是：

.list1 tr:hover td{
background-color:#fefefe;
}

//--this css for the td keeps overriding the one i showed earlier
.list1 td{
background-color:#ccc000;
}

感谢大家的反馈！

【问题讨论】：

首先我会尝试清理你的标记 - 你没有关闭所有的 td 标签。
jsfiddle.net/FnVhX 它的工作
嗯，问题出在 css 上。我没有在这里展示完整的 CSS。在我的代码中，td 的 css 覆盖了 tr:hover 的 css。我只需要在 .list1 tr:hover 后面附加 'td' 即可达到效果。
那是因为你已经为td设置了background-color。在这种情况下，td 的背景覆盖了tr 的背景。所以删除所有td 背景，然后为tr 设置所有背景。

标签： css

【解决方案1】：

tr:hover 在旧浏览器中无法使用。

您可以为此使用 jQuery：

.tr-hover
{  
  background-color:#fefefe;
}

$('.list1 tr').hover(function()
{
    $(this).addClass('tr-hover');
},function()
{
    $(this).removeClass('tr-hover');
});

【讨论】：

【解决方案2】：

对我来说很好...tr:hover 应该可以工作。可能它不会起作用，因为：

您设置的背景颜色很浅。你不会碰巧在白色背景上使用它吧？
您的<td> 标签未正确关闭。

请注意，悬停<tr> 在旧版浏览器中不起作用。

【讨论】：

正确。我正要发布同样的东西。背景颜色太浅，在白色上看不出差异，td标签平衡被打破。

【解决方案3】：

就像@wesley 所说，你还没有关闭你的第一个<td>。你打开了两次。

<table class="list1">
<tr>
   <td>1</td><td>a</td>
</tr>
<tr>
   <td>2</td><td>b</td>
</tr>
<tr>
   <td>3</td><td>c</td>
</tr>
</table>

CSS：

.list1 tr:hover{
    background-color:#fefefe;
}

无需 JavaScript，只需完成您的 HTML 代码

【讨论】：

【解决方案4】：

你最好的选择是使用

table.YourClass tr:hover td {
background-color: #FEFEFE;
}

行不完全支持背景颜色，但单元格支持，使用 :hover 和子元素的组合将产生您需要的结果。

【讨论】：

很好的回答大卫。完全的。谢谢！
只是强调一下：结果，一行中的所有单元格都会被突出显示，而不仅仅是您用鼠标指向的那个。
令人印象深刻的答案！
我找不到有关此语法的任何文档，顶行的含义是什么？这是否意味着如果您将鼠标悬停在“tr”上，它也会将规则应用于“td”？ table.class 的前缀是否相关？
不错的答案。看了一会儿，我发现的都是复杂的 javascript 答案。这很棒。

【解决方案5】：

您可以简单地使用background CSS 属性，如下所示：

tr:hover{
    background: #F1F1F2;    
}

Working example

【讨论】：

【解决方案6】：

您需要将<!DOCTYPE html> 用于 :hover 以使用除<a> 标记之外的任何内容。尝试将其添加到 HTML 的顶部。

【讨论】：

【解决方案7】：

我遇到了同样的问题。我发现如果我使用像这样的 DOCTYPE：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

它没有工作。但如果我使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

确实有效。

【讨论】：

【解决方案8】：

试试看：

css代码：

.list1 tr:hover td {
    background-color:#fefefe;
}

【讨论】：

【解决方案9】：

也试试这个tr:hover td {color: aqua;} `

【讨论】：

【解决方案10】：

试试

.list1 tr:hover td{
    background-color:#fefefe;
}

【讨论】：

【解决方案11】：

使用!important:

.list1 tr:hover{
    background:#fefefe !important;
}

【讨论】：

【解决方案12】：

最近我也遇到了类似的问题，问题是我使用的是背景色，使用背景：{anyColor}

示例：

tr::hover td {background: red;}

这很有魅力！

【讨论】：

【解决方案13】：

此外，CSS 文件中标签的样式顺序也很重要。确保您的 tr:nth-child 和 tr:hover td 在表的 td 和 th 之前描述。像这样：

#tblServers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#tblServers tr:nth-child(even){background-color: #f2f2f2;}

#tblServers tr:hover td{background-color: #c1c4c8;}

#tblServers td, #tblServers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tblServers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4a536e;
  color: white;
}

【讨论】：