Question

我有this code in jsfiddle，当我将鼠标悬停在它们上面时，我希望这些行能够突出显示。我尝试了适用于我的常用技术，但在此问题上，它只突出显示th标题行，而不是table行。

基本上，我尝试过平时：

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

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

Check out the code in JSFiddle.

Answer 1

我不确定为什么它不能正常工作，但删除td中的#main_content table tr 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/embedded/result/

为什么我的表tr td：hover只适用于th标题行？，不适用于任何其他行？

4 个答案: