Как выделить строку таблицы при наведении только с помощью CSS?

Question

Можно ли выделить строку таблицы при наведении (что-то вроде this), используя только CSS (без JavaScript)?

Answer 1

Да, строка возможна, но не столбец.

tr:hover { 
    background-color: lightyellow; 
} 

Answer 2

Если вы не заботитесь о Internet Explorer, то :hover CSS псевдо-класс работает с любым элементом.

Если вы do заботитесь об IE, вы можете найти обходное решение here.

Answer 3

Да, это возможно, но вы должны беспокоиться о совместимости браузера здесь является примером

<style type="text/css"> 
    .tbl {width: 640px;} 
    .tbl tr {background-color: Blue; height: 24px} 
    .tbl tr:hover {background-color: Red;} 
</style> 


<table class="tbl"> 
    <tr><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td></tr> 
    <tr><td></td><td></td><td></td></tr> 
</table> 

Answer 4

<style type="text/css"> 
    tr.tr-hover-class:hover { 
     background: grey !important; 
    } 
</style> 

<table> 
    <tr class='tr-hover-class'></tr> 
</table>