Question

如何将鼠标悬停在该行的单元格上时更改行颜色

2012-10-26

4490

html css css-tables

当我将鼠标悬停在由 3 列组成的表格中的某一行的单元格上时，CSS 中是否有任何方法可以更改该行的背景颜色？

table tr:hover
{
    background-color:blue;
}

似乎不起作用。

更新

我使用的是 Mozilla Firefox，只有当我将鼠标悬停在 <th> 上时，它才有效，而不是 <td>

Answer 1

使用此语法：

tr.hover > td:hover
{
    background-color: blue;
}

<tr class="hover">
    <td>;lajsdfl;jasdl;jasd;f</td>
    <td>;lajsdfl;jasdl;jasd;f</td>
</tr>

小提琴： http://jsfiddle.net/DQ9Vz/

Answer 2

tr:hover{ 背景颜色：红色;

sjramsay

2012-10-26

Answer 3

这对我来说很好用：

http://jsfiddle.net/EJ63m/

<html>
<head>
<style>
table tr:hover
{
    background-color:blue;
}
</style>
</head>
<body>
<table>
    <tr><td>Foo</td><td>Bar</td><td>FooBar</td></tr>
    <tr><td>Bar</td><td>Foo</td><td>FooBar</td></tr>
</table>
</body>
</html>

您使用的是什么浏览器？