Question

当鼠标悬停在表格行上时，我正在尝试突出显示（更改背景颜色）整行。我在网上搜索它应该有效，但事实并非如此。我正在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;
}

感谢您的反馈！

Answer 1

您最好的选择是使用

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

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

Answer 2

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

Answer 3

试

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

Answer 4

tr:hover在旧浏览器中不起作用。

您可以使用jQuery：

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

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

Answer 5

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

您设置的背景颜色非常浅。你碰巧在白色背景上使用它，是吗？
您的<td>代码未正确关闭。

请注意，将鼠标悬停在<tr>无法在旧版浏览器中使用。

Answer 6

您只需使用background CSS属性，如下所示：

tr:hover{
    background: #F1F1F2;    
}

Working example

Answer 7

试一试：

css代码：

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

Answer 8

使用!important：

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

Answer 9

就像@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代码

即可

Answer 10

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

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

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

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

确实有效。

Answer 11

另请尝试tr:hover td {color: aqua;} `

Answer 12

最近我遇到了类似的问题，问题是我正在使用background-color，请使用background：{anyColor}

示例：

tr::hover td {background: red;}

这就像魅力！

Answer 13

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

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

tr：悬停不起作用

13 个答案: