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

Question

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

我试过这个:

tr:hover {
    background: #000;
}

但这不起作用.使用td:hover作品,但我想改变整个表格行的背景颜色.

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

Answer 1

<tr>用CSS自己很难访问,试试吧 tr:hover td {background:#000}

如果它是完美的,也许这应该被接受？ (15认同)
在对IE进行故障排除时,了解哪个版本至关重要.较旧版本的IE仅支持锚点元素上的`:hover`(我相信只有你有适当的doctype才能在IE7中使用).如果你正在处理旧的IE版本,试试这个:http://peterned.home.xs4all.nl/csshover.html否则它可能是你做错了. (2认同)

Answer 2

你可以尝试:

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

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

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

感谢这些答案,他们让我的一天!:)