tr:悬停不起作用

LC *_*ong 47 css

当鼠标悬停在表格行上时,我正在尝试突出显示(更改背景颜色)整行.我在网上搜索它应该有效,但事实并非如此.我在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>
Run Code Online (Sandbox Code Playgroud)

我的css:

.list1 tr:hover{
background-color:#fefefe;
}
Run Code Online (Sandbox Code Playgroud)

正确的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;
}
Run Code Online (Sandbox Code Playgroud)

谢谢你们的反馈!

小智 124

你最好的选择是使用

table.YourClass tr:hover td {
background-color: #FEFEFE;
}
Run Code Online (Sandbox Code Playgroud)

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

  • 令人印象深刻的答案! (3认同)
  • 很好的答案。环顾四周,我发现的都是复杂的 javascript 答案。这很棒。 (2认同)

Sha*_*awn 6

尝试

.list1 tr:hover td{
    background-color:#fefefe;
}
Run Code Online (Sandbox Code Playgroud)


小智 5

您需要使用<!DOCTYPE html>:hover来与<a>标记一起使用。尝试将其添加到HTML的顶部。


San*_*ooj 3

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

您可以使用 jQuery 来实现此目的:

.tr-hover
{  
  background-color:#fefefe;
}
Run Code Online (Sandbox Code Playgroud)
$('.list1 tr').hover(function()
{
    $(this).addClass('tr-hover');
},function()
{
    $(this).removeClass('tr-hover');
});
Run Code Online (Sandbox Code Playgroud)