¿Cómo resaltar la fila de la tabla al pasar el mouse utilizando solo CSS?

Question

¿Es posible resaltar la fila de la tabla al pasar el mouse (algo así como this) usando solo CSS (sin JavaScript)?

Answer 1

Sí, una fila es posible pero no una columna.

tr:hover { 
    background-color: lightyellow; 
} 

Answer 2

Si no se preocupan por Internet Explorer, el pseudo-clase :hover CSS funciona con cualquier elemento.

Si hace cuidado con IE, puede encontrar una solución here.

Answer 3

Sí, es posible, pero hay que preocuparse por la compatibilidad del navegador aquí es un ejemplo

<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>