html - tabla - tr hover

Cambio del color de fondo del elemento tr en mouseover

Question

Quiero que las filas de mi tabla estén resaltadas al pasar el mouse, pero aún tengo que encontrar una forma de hacerlo que no esté usando Javascript. ¿No es esto posible en CSS?

He intentado esto:

tr:hover {
background: #000;
}

Pero eso no funciona. El uso de td:hover funciona, pero quiero cambiar el color de fondo de toda la fila de la tabla.

¿Hay una forma pura de CSS / HTML para hacerlo, o voy a tener que recurrir a Javascript?

Answer 1

Esto funcionará:

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

Si desea aplicar solo bg-color en TD, entonces:

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

Incluso sobrescribirá el color dado y lo aplicará con fuerza.

Answer 2

Intentalo

<!- HTML -->
<tr onmouseover="mOvr(this,''#ffa'');" onmouseout="mOut(this,''#FFF'');">
<script>
function mOvr(src,clrOver) {
if (!src.contains(event.fromElement)) {
src.bgColor = clrOver;
}
}
function mOut(src,clrIn) {
if (!src.contains(event.toElement)) {
src.bgColor = clrIn;
}
}
</script>

Answer 3

Puedes darle al tr un id y hacerlo.

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>

Answer 4

Tu podrías intentar:

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

Demostración de JS Fiddle .

Answer 5

Yo tuve el mismo problema:

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

Allone no funcionó, pero añadiendo

tr:hover td { background: transparent; }

a la siguiente linea de mi css hizo el trabajo por mi !! Mi problema era que algunos de los TD ya tenían un color de fondo asignado y no sabía que tenía que configurarlo en TRANSPARENTE para que funcionara tr: hover.

En realidad, lo usé con un nombre de clase:

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

Gracias por estas respuestas, me hicieron el dia !! :)

Answer 6

es fácil . Solo agrega! Importante al final de tu línea css:

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

Answer 7

<tr> s ellos mismos son muy difíciles de acceder con CSS, intente tr:hover td {background:#000}

Answer 8

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

Answer 9

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

sólo un resaltado de celda de clase