tr:hover不起作用

当鼠标hover在表格行上时,我试图突出显示整个行的背景颜色(改变背景颜色)。 我通过networkingsearch,它应该工作,但它不。 我在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; } 

谢谢你们的反馈!

  • 如何删除单击button上的焦点
  • CSS3渐变边框
  • 如何使用font-family lato?
  • 在“HTML”页面的“HEAD”元素之外声明CSS样式?
  • CSS缩小图像以适应包含div,而不指定原始大小
  • css身高差距:100%vs身高:自动
  • 如何使用CSS将内容集中在div中?
  • 圆angular(边界半径)Safari的问题
  • 10 Solutions collect form web for “tr:hover不起作用”

    你最好的select是使用

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

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

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

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

    你可以使用jQuery来做到这一点

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

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

     tr:hover{ background: #F1F1F2; } 

    工作示例

    尝试

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

    适合我的工作… TRhover应该工作。 可能它不会工作,因为:

    1)你设置的背景颜色很淡。 你不会碰巧在白色背景上使用这个吗?

    2)您的td标签没有正确closures。

    请注意,hovertr在旧版浏览器中不起作用。

    像韦斯利赛义德,你还没有closures你的第一个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> my css: .list1 tr:hover{ background-color:#fefefe; } 

    没有JavaScript需要,只需完成您的HTML代码

    我有同样的问题。 我发现如果我使用DOCTYPE:

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

    它没有工作。 但是,如果我使用:

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

    它确实工作。

    尝试一下:

    CSS代码:

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

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