关于html：为什么我的表tr td：hover仅适用于标题行？而不适用于其他行？

Why does my table tr td:hover only work for the th header row?, not for any other rows?

我在jsfiddle中有这段代码，当我将鼠标悬停在它们上面时，我希望这些行突出显示。我已经尝试了对我有用的常用技术，但是在此技术上，它仅突出显示th标头行，而不突出显示table行。

查看JSFiddle中的代码。

基本上，我尝试了通常的方法：

1	table tr:hover{background-color: yellow;}

但这仅突出显示表tr th行，而不突出表的行，我不知道为什么要这样做。

在JSFiddle中检查代码。

相关讨论

这是因为td的背景色覆盖了tr的背景色。因此，您需要更改以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

您需要修改CSS代码，如下所示：

1
2
3
4
5
6
7

#main_content table tr:hover td
{

color: #666;
border-right: 1px solid #eee;
background-color: #ffcc11;
}

:hover是主要内容。

希望这可以帮助

我也不知道为什么它不能按原样工作，但是在#main_content table tr td中删除td似乎可以完成任务。所以改变

1
2
3
4
5
6

#main_content table tr td
{
color: #666;
border-right: 1px solid #eee;
background-color: #fafafa;
}

至

1
2
3
4
5
6

#main_content table tr
{
color: #666;
border-right: 1px solid #eee;
background-color: #fafafa;
}