¿Por qué CSS no funciona en las filas de la tabla cuando las celdas dentro de las filas tienen nombres de clase?

Estoy atascado con este problema por lo que cualquier ayuda sería apreciada. Tengo una mesa con varias filas. Cada celda dentro de la fila pertenece a una cierta clase. Yo uso estos nombres de clase para colorear las celdas.¿Por qué CSS no funciona en las filas de la tabla cuando las celdas dentro de las filas tienen nombres de clase?

Aquí está un ejemplo de mi fila de la tabla:

<tr> 
    <td class = "summarypage-odd-column">Theme</td> <td class = "summarypage-odd-column">Q2 2009</td> <td class = "summarypage-odd-column">Q1 2009</td> 
    <td class = "summarypage-even-column">Theme</td> <td class = "summarypage-even-column">Q2 2009</td> <td class = "summarypage-even-column">Q1 2009</td> 
    <td class = "summarypage-odd-column">Business Area</td> <td class = "summarypage-odd-column">Q1 2009</td> <td class = "summarypage-odd-column">Q1 2008</td> 
</tr>

quisiera resaltar cada fila cuando el usuario mueve el puntero del ratón sobre cualquier celda de esa fila. Así que utilicé el siguiente código CSS para lograr eso.

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

Desafortunadamente, parece que cada celda de datos de la tabla tiene un nombre de clase, el control deslizante no funciona. Pero si elimino los nombres de clase de las celdas de datos, el vuelo estacionario funciona.

Mi pregunta es si hay alguna forma de que pueda obtener el elemento de desplazamiento activo para la fila de la tabla, al tiempo que todavía tengo nombres de clase para las celdas de datos de la tabla dentro de la fila.

Fuente

2010-02-12 Vicer

por qué wiki de la comunidad ?? –

Prueba esto:

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

Lugar esto después de las td declaraciones de estilos existentes para estar seguro

Fuente

2010-02-12 00:48:08

amigo, ¡lo has clavado! Gracias. cuando lo miré por primera vez pensé que su solución aplicaría la parte posterior. colorear solo a la celda de datos a la que apunta el puntero del mouse y no toda la fila (que es lo que yo quería). Pero obviamente ese no es el caso. Hubo algunas filas como el encabezado que no quería que se resaltara, así que definí simplemente otra clase debajo del código ur y puse: --- tr.summarypage-section-title: hover td { \t color de fondo: deepskyblue; color: # 000; } --- – Vicer

@Nick Craver funciona, pero ¿podría explicar por qué tr: hover no funciona? – Bear

@Bear porque el código html anterior debe estar anidado en las etiquetas

. Una vez que los anides en etiquetas de tabla, el CSS para tr: hover funciona al menos en Chrome y FF con el atributo de clase definido. – DataHerder

This does not happen for me. Asegúrese de que sólo se va a añadir/eliminar nombres de clase al comprobar si tienen un impacto, y asegúrese de que los td s no tienen su propio fondo encubrir la de la tr.

Fuente

2010-02-12 00:45:38 Matchu

en Matchu, usted dio los nombres de clase de las celdas pero no usó esos nombres para formatear las celdas. intente agregar las siguientes dos líneas a la sección 'estilo' y vea qué sucede. - td.one {background-color: red} td.two {background-color: blue} - Este es el problema al que me enfrento. – Vicer

Eso es correcto. Las etiquetas 'td' están en la parte superior, por lo que su color de fondo tiene prioridad. ¿Qué tal tener 'tr: hover td' como tu estilo? – Matchu

Es probable que tenga que utilizar el designador importante asegurarse de que su estilo de vuelo estacionario anula el int fondo definido! que clase:

tr:hover { 
    background-color: #FFFFAF0 !important; 
    color: #000 !important; 
}

Curiosamente, esto no va a funcionar para IE6, ya que el navegador sólo se aplica a un vuelo estacionario etiquetas.

Fuente

2010-02-12 00:49:59

Las instrucciones de CSS dentro del nombre de clase tienen prioridad sobre las instrucciones <tr>.

Para solucionar esto, use td.summarypage-impar-columna: hover, td.summarypage-even-column: hover dentro de su CSS.

Nota: Si está utilizando IE6, el: hover solo funciona en enlaces, es decir, a: hover.

Fuente

2010-02-12 03:43:47 Sarhanis

gracias pero 'td.summarypage-impar-columna: hover' solo resalta cada celda de datos dsnt it? Quiero que se resalte toda la fila. La respuesta de Nick 'tr: hover td' es el camino a seguir. pero si desea tratar un conjunto de celdas dentro de la fila de manera diferente, puede usar smthin similar a lo que sugiere. Por ejemplo, para no resaltar celdas vacías: -> tr: hover td.empty-cells {... table bk color here ...} <- will do. – Vicer

Creo que el color de fondo td sobrescribe el tr color de fondo. La solución dada por @Nick Craver es la buena.
Debe cambiar el color de fondo de las celdas, no el color de fondo de la fila.

tr:hover td { 
    ... 
}

Fuente

2014-02-09 11:27:34

nunca ponga espacio entre

tr:hover(space)td

que le estaba dando el espacio por lo que estaba trabajando para mí.

Fuente

2014-02-17 22:10:08

Por favor, mejore su respuesta. –

Cuestiones relacionadas

¿Por qué CSS no funciona en las filas de la tabla cuando las celdas dentro de las filas tienen nombres de clase?

Respuesta

Cuestiones relacionadas