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

谢谢你们的反馈!

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

  • 如何并排放置div
  • 如何使Twitter的引导工具提示有多行?
  • 如何覆盖左:0使用CSS或JQuery?
  • 如何增加虚线边框点之间的空间
  • 如何删除/忽略:在触摸设备上hoverCSS样式
  • 居中一个没有宽度的div块
  • 如何在表格行(tr)上覆盖div(或任何元素)?
  • 使用JQuery播放/暂停HTML 5video
  • jquery ui对话框固定定位
  • Symfony2 - CSS中的资产负载图像
  • 如何在同一行上alignment两个元素而不更改HTML