CSS tr：悬停不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7510753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
tr:hover not working
提问by LC Yoong
I'm trying to highlight (change background color) of the entire row when the mouse is hovering on a table row. I searched through the Net and it should be working, but it doesn't. I'm displaying it on Chrome.
当鼠标悬停在表格行上时，我试图突出显示（更改背景颜色）整行。我通过网络搜索，它应该可以工作，但它没有。我在 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>
my css:
我的CSS：
.list1 tr:hover{
background-color:#fefefe;
}
The correct css should be:
正确的 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;
}
Thanks for the feedback guys!
谢谢你们的反馈！
回答by David Peters
Your best bet is to use
你最好的选择是使用
table.YourClass tr:hover td {
background-color: #FEFEFE;
}
Rows aren't fully support for background color but cells are, using the combination of :hover and the child element will yield the results you need.
行不完全支持背景颜色，但单元格支持，使用 :hover 和子元素的组合将产生您需要的结果。
回答by Yvette
You need to use <!DOCTYPE html>for :hover to work with anything other than the <a>tag. Try adding that to the top of your HTML.
您需要使用<!DOCTYPE html>for :hover 来处理<a>标签以外的任何内容。尝试将其添加到 HTML 的顶部。
回答by Shawn
try
尝试
.list1 tr:hover td{
background-color:#fefefe;
}
回答by Sanooj
tr:hoverdoesn't work in old browsers.
tr:hover在旧浏览器中不起作用。
You can use jQuery for this:
您可以为此使用 jQuery：
.tr-hover
{
background-color:#fefefe;
}
$('.list1 tr').hover(function()
{
$(this).addClass('tr-hover');
},function()
{
$(this).removeClass('tr-hover');
});
回答by JNDPNT
Works fine for me... The tr:hovershould work. Probably it won't work because:
对我来说很好用......tr:hover应该可以工作。可能它不起作用，因为：
The background color you have set is very light. You don't happen to use this on a white background, do you?
Your
<td>tags are not closed properly.
您设置的背景颜色非常浅。你不会碰巧在白色背景上使用它，是吗？
您的
<td>标签未正确关闭。
Please note that hovering a <tr>will not work in older browsers.
请注意，悬停 a<tr>在旧浏览器中不起作用。
回答by monish001
You can simply use backgroundCSS property as follows:
您可以简单地使用backgroundCSS 属性，如下所示：
tr:hover{
background: #F1F1F2;
}
回答by Mohsen Newtoa
Use !important:
使用!important：
.list1 tr:hover{
background:#fefefe !important;
}
回答by user3687895
Try it:
尝试一下：
css code:
css代码：
.list1 tr:hover td {
background-color:#fefefe;
}
回答by Ahmed
Also try thistr:hover td {color: aqua;}`
也试试这个tr:hover td {color: aqua;}`
回答by Stevan Stojanovic
Recently I had a similar problem, the problem was I was using background-color, use background: {anyColor}
最近我遇到了类似的问题，问题是我使用的是背景色，使用背景色：{anyColor}
example:
例子：
tr::hover td {background: red;}
This works like charm!
这就像魅力一样！
