Question

我想在鼠标上突出显示我的表格行，但我还没有找到一种不使用Javascript的方法。这在CSS中不可能吗？

我试过这个：

tr:hover {
    background: #000;
}

但这不起作用。使用td:hover有效，但我想更改整个表格行的背景颜色。

是否有纯CSS / HTML方式，或者我将不得不求助于Javascript？

Answer 1

<tr>本身很难通过CSS访问，请尝试tr:hover td {background:#000}

Answer 2

你可以尝试：

tr:hover {
    background-color: #000;
}

tr:hover td {
    background-color: transparent; /* or #000 */
}

JS Fiddle demo

Answer 3

这将有效：

tr:hover {
    background: #000 !important;
}

如果您只想在TD上应用bg-color，那么：

tr:hover td {
    background: #c7d4dd !important;
}

它甚至会覆盖你给定的颜色并强行应用它。

Answer 4

我遇到了同样的问题：

tr:hover { background: #000 !important; }

所有人都没有工作，但添加了

tr:hover td { background: transparent; }

到我的css的下一行做了我的工作!! 我的问题是一些TD已经分配了背景颜色，我不知道我必须将它设置为TRANSPARENT以使tr：hover工作。

实际上，我将它与类名一起使用：

.trclass:hover { background: #000 !important; }
.trclass:hover td { background: transparent; }

感谢这些答案，他们度过了我的一天！：）

Answer 5

tr:hover td.someclass {
   background: #EDB01C;
   color:#FFF;
}

only someclass cell highlight

Answer 6

tr:hover td {background-color:#000;}

Answer 7

你可以给tr一个id并做。

tr#element{
    background-color: green;
    cursor: pointer;
    height: 30px;

}

tr#element:hover{
    background-color: blue;
    cursor: pointer;

}

<table width="400px">
<tr id="element">
<td></td>
</tr>
</table>

Answer 8

很容易。只需在css行的末尾添加！important：

tr:hover {    background: #000 !important; }

Answer 9

试试吧

us-east-1b

在鼠标悬停时更改tr元素的背景颜色

9 个答案: