html - 为什么我的表 tr td :hover only work for the th header row? 而不是任何其他行？

Question

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

View the code in JSFiddle.

基本上，我试过通常的:

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

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

Check out the code in 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;
}