Colorear Filas de una tabla. par-impar

[Naahuel]

Tu problema es un resultado raro de que escribiste mal "white". Pusiste "while".

Si hubieses puesto "white", no se colorearía ninguna fila al pasar el mouse (ni pares ni impares). Dado que "while" no es un color CSS válido, no lo aplica. Pero el otro si.

Entonces, usando jQuery (que para estos propósitos está muy mal) los estilos se aplican inline. Es decir:

Código HTML:

<tr style="background-color: white;"></tr>
 

Los estilos inline tienen mayor peso que los embebidos o los importados de una hoja de estilo. Entonces, el estilo inline "gana" frente al :hover que incorporaste en otro lado.

¿La solución? No uses jQuery. Está mal (para este propósito).

Código HTML:

<style>
  tr{
    /* Todas las filas blancas */
    background-color: white;
  }
  tr:nth-child(2n+1){
    /* Filas impares grises */
    background-color: grey;
  }
  tr:hover{
    /* Filas celeste al pasar el mouse */
    background-color: aqua;
  }
</style>
 
<table width="100%">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
    </tr>
    <tr>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
    </tr>
    <tr>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
      <td>lorem lorem lorem lorem lorem lorem lorem </td>
    </tr>
  </tbody>
</table>
 

En este ejemplo la primer regla (por ser una regla de tipo elemento) es la menos fuerte. Las otras dos reglas que siguen son más fuertes, pues son elemento:pseudo-clase y además vienen después. Por lo tanto, siempre gana la que está más abajo (en este caso, la hover).