[英]Why does my table tr td:hover only work for the th header row?, not for any other rows?
I have this code in jsfiddle and I would like the rows to highlight when I hover over them. 我在jsfiddle中有这个代码,当我将鼠标悬停在它们上面时,我希望这些行能够突出显示。 I have tried the usual technique that works for me, but on this one, it only highlights the
th
header row, and not the table
rows. 我已经尝试了平时的技术,为我的作品,但就这一个,这既突出了
th
标题行,而不是table
行。
View the code in JSFiddle. 在JSFiddle中查看代码。
Basically, I've tried the usual: 基本上,我试过平常:
table tr:hover{background-color: yellow;}
But this only highlights the table tr th
Row only, and not the rows of the table, I have no idea why it's doing this. 但是这只突出了
tr th
行的表,而不是表的行,我不知道它为什么这样做。
I'm not sure either why it doesn't work as it is, but removing td
in #main_content table tr td
seems to do the job. 我不知道为什么要么它不工作,因为它是,但除去
td
在#main_content table tr td
似乎做的工作。 So change 所以改变
#main_content table tr td
{
color: #666;
border-right: 1px solid #eee;
background-color: #fafafa;
}
to 至
#main_content table tr
{
color: #666;
border-right: 1px solid #eee;
background-color: #fafafa;
}
You need to modify the CSS code, as so: 您需要修改CSS代码,如下所示:
#main_content table tr:hover td
{
color: #666;
border-right: 1px solid #eee;
background-color: #ffcc11;
}
the :hover
is the main thing. :hover
是主要的事情。
Hope this helps 希望这可以帮助
That's because your td
's background color is overriding the tr's background color. 那是因为你的
td
的背景颜色覆盖了tr的背景颜色。 So, you need to change the following 因此,您需要更改以下内容
#main_content table tr td
{
color: #666;
border-right: 1px solid #eee;
background-color: #fafafa;
}
to
#main_content table tr td
{
color: #666;
border-right: 1px solid #eee;
}
#main_content table tr // apply the color to the tr instead of the td this way it can get overridden
{
background-color: #fafafa;
}
In CSS, change 在CSS中,改变
#main_content table tr td
{
color: #666;
border-right: 1px solid #eee;
background-color: #fafafa;
}
to 至
#main_content table tr
{
color: #666;
border-right: 1px solid #eee;
background-color: #fafafa;
}
as seen in http://jsfiddle.net/jhuntdog/NPrSU/12/embedded/result/ 如http://jsfiddle.net/jhuntdog/NPrSU/12/embedded/result/所示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.