Изменение цвета фона элемента tr при наведении указателя мыши

Я хочу, чтобы мои строки в таблице были выделены с помощью мыши, но мне еще предстоит найти способ сделать это, не используя Javascript. Это невозможно в CSS?

Я пробовал это:

tr:hover {
    background: #000;
}

Но это не работает. Использование td:hover работает, но я хочу изменить цвет фона всей строки таблицы.

Есть ли чистый способ CSS/HTML для этого, или мне придётся прибегнуть к Javascript?

Ответы

Ответ 1

<tr> сами очень трудно получить доступ к CSS, попробуйте tr:hover td {background:#000}

Ответ 2

Вы можете попробовать:

tr:hover {
    background-color: #000;
}

tr:hover td {
    background-color: transparent; /* or #000 */
}

JS Fiddle demo.

Ответ 3

Это будет работать:

tr:hover {
    background: #000 !important;
}

Если вы хотите применить bg-color к TD, тогда:

tr:hover td {
    background: #c7d4dd !important;
}

Он даже перезапишет ваш заданный цвет и применит это принудительно.

Ответ 4

У меня была та же проблема:

tr:hover { background: #000 !important; }

allone не работал, но добавив

tr:hover td { background: transparent; }

чтобы следующая строка моего css сделала работу для меня!! Моя проблема заключалась в том, что некоторые из TD уже назначили фоновый цвет, и я не знал, что должен установить это для TRANSPARENT, чтобы сделать работу tr: hover.

Собственно, я использовал его с classnames:

.trclass:hover { background: #000 !important; }
.trclass:hover td { background: transparent; }

Спасибо за эти ответы, они сделали мой день!:)

Ответ 5

tr:hover td.someclass {
   background: #EDB01C;
   color:#FFF;
}

подсветка ячейки только с текстом

Ответ 6

tr:hover td {background-color:#000;}

Ответ 7

Вы можете указать tr id и сделать это.

tr#element{
    background-color: green;
    cursor: pointer;
    height: 30px;

}

tr#element:hover{
    background-color: blue;
    cursor: pointer;

}

<table width="400px">
<tr id="element">
<td></td>
</tr>
</table>

Ответ 8

его легко. Просто добавьте! Важно в конце строки css:

tr:hover {    background: #000 !important; }