Почему моя таблица tr td: hover работает только для строки заголовка th, а не для каких-либо других строк?

Question

У меня есть этот код в jsfiddle , и я хотел бы, чтобы строки выделялись при наведении на них курсора.Я попробовал обычную технику, которая работает для меня, но на этом она только выделяет строку заголовка th, а не строки table.

Просмотр кода в JSFiddle.

В принципе, я попробовал обычное:

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

Но это только подсвечивает таблицу tr th Только строки, а не строки таблицы, я понятия не имеюпочему он это делает.

Проверьте код в JSFiddle.

Answer 1

Это потому, что цвет фона вашего 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 2

Вам нужно изменить код CSS следующим образом:

#main_content table tr:hover td
{

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

:hover - это главное.

Надеюсь, это поможет

Answer 3

Я тоже не уверен, почему это не работает, как есть, но удаление 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 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/