Html 在鼠标悬停时更改 tr 元素的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5492900/
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
Changing background colour of tr element on mouseover
提问by Josh
I want to have my table rows highlighted on mouse over, but I have yet to find a way to do it that isn't using Javascript. Is this not possible in CSS?
我想让我的表格行在鼠标悬停时突出显示，但我还没有找到一种不使用 Javascript 的方法。这在 CSS 中是不可能的吗？
I've tried this:
我试过这个：
tr:hover {
background: #000;
}
But that doesn't work. Using td:hoverworks, but I want to change the background colour of the whole table row.
但这不起作用。使用td:hover作品，但我想改变整个表格行的背景颜色。
Is there a pure CSS/HTML way to do it, or am I going to have to resort to Javascript?
有没有纯粹的 CSS/HTML 方式来做到这一点，还是我将不得不求助于 Javascript？
回答by Wesley Murch
<tr>s themselves are very hard to access with CSS, try tr:hover td {background:#000}
<tr>s 本身很难通过 CSS 访问，请尝试 tr:hover td {background:#000}
回答by David says reinstate Monica
You could try:
你可以试试：
tr:hover {
background-color: #000;
}
tr:hover td {
background-color: transparent; /* or #000 */
}
回答by belushi
I had the same problem:
我有同样的问题：
tr:hover { background: #000 !important; }
allone did not work, but adding
所有人都没有工作，但添加
tr:hover td { background: transparent; }
to the next line of my css did the job for me!! My problem was that some of the TDs already had a background-color assigned and I did not know that I have to set that to TRANSPARENT to make the tr:hover work.
到我的 css 的下一行为我完成了这项工作！！我的问题是一些 TD 已经分配了背景颜色，我不知道我必须将它设置为 TRANSPARENT 才能使 tr:hover 工作。
Actually, I used it with a classnames:
实际上，我将它与类名一起使用：
.trclass:hover { background: #000 !important; }
.trclass:hover td { background: transparent; }
Thanks for these answers, they made my day!! :)
感谢这些答案，他们让我开心！！:)
回答by nirav dhanorkar
This will work:
这将起作用：
tr:hover {
background: #000 !important;
}
If you want to only apply bg-color on TD then:
如果您只想在 TD 上应用 bg-color，则：
tr:hover td {
background: #c7d4dd !important;
}
It will even overwrite your given color and apply this forcefully.
它甚至会覆盖您给定的颜色并强制应用它。
回答by KristKing
tr:hover td.someclass {
background: #EDB01C;
color:#FFF;
}
only someclass cell highlight
只有一些类单元格突出显示
回答by MikeM
tr:hover td {background-color:#000;}
回答by pixelJockey
You can give the tr an id and do it.
你可以给 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>
回答by Amir
its easy . Just add !important at the end of your css line :
这很简单 。只需在 css 行的末尾添加 !important ：
tr:hover { background: #000 !important; }
回答by Jetro Bernardo
Try it
尝试一下
<!- HTML -->
<tr onmouseover="mOvr(this,'#ffa');" onmouseout="mOut(this,'#FFF');">
<script>
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.bgColor = clrIn;
}
}
</script>
