为什么我的表 tr td:hover 仅适用于第标题行？而不适用于任何其他行？

Question

我在 jsfiddle 中有 此代码，我希望当我将鼠标悬停在行上时突出显示这些行。我尝试了对我有用的常用技术，但在这个技术上，它只突出显示第 th 标题行，而不是 table 行。

在 JSFiddle 中查看代码。

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

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

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

查看 JSFiddle 中的代码。

Answer 1

我也不确定为什么它不能按原样工作，但删除 #main_content table tr td 中的 td 似乎可以完成这项工作。所以

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

改成

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

Answer 2

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

#main_content table tr:hover td
{

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

:hover 是主要内容。

希望这有帮助

Answer 3

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

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

Answer 4

在 CSS 中，更改

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

为

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

http://jsfiddle.net/jhuntdog/NPrSU/ 中所示12/嵌入/结果/