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

tabla responsive bootstrap

Question

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 determinada clase. Yo uso estos nombres de clase para colorear las celdas.

Aquí hay una fila de ejemplo de mi 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>

Me gustaría resaltar cada fila cuando el usuario mueve el puntero del mouse sobre cualquier celda de esa fila. Así que utilicé el siguiente código CSS para lograrlo.

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

desafortunadamente parece que debido a que cada celda de datos de la tabla tiene un nombre de clase, el desplazamiento no funciona. Pero si elimino los nombres de clase de las celdas de datos, el desplazamiento funciona.

Mi pregunta es si hay alguna forma de hacer que el elemento de desplazamiento funcione para la fila de la tabla, mientras tenga nombres de clase para las celdas de datos de la tabla dentro de la fila.

Answer 1

Creo que el color de fondo td sobrescribe el color de fondo tr. 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 {
   ...
}

Answer 2

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

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

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

Answer 3

Probablemente necesite utilizar el designador importante para asegurarse de que su estilo de desplazamiento anule el fondo definido en la clase:

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

Curiosamente, esto no funcionará para IE6 porque ese navegador solo aplica el desplazamiento a las etiquetas.

Answer 4

Prueba esto:

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

Coloca esto después de las declaraciones de estilo td existentes para estar seguro

Answer 5

nunca ponga espacio entre

tr:hover(space)td

Yo estaba dando espacio por lo tanto, estaba trabajando para mí.

Answer 6

Esto no me pasa. Asegúrese de que solo está agregando / eliminando nombres de clase al verificar si tienen un impacto, y asegúrese de que los td no tengan su propio fondo que cubra el de tr .