Tableau capotage hightlight changement de couleur de texte

Question

Salut J'ai une table peuplée de php, qui a des couleurs alternatives de ligne et fonctionne très bien, ce que je suis en train maintenant faire est de changer la couleur du texte dans la ligne de la table quand il est mis en évidence.

Le code ci-dessous montre le point culminant de la table, ce qui fonctionne très bien, mais je ne peux pas l'élément de couleur pour changer.

<tr class="active" bgcolor="#363636" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#363636';" onMouseOver="this.color='#fff';"> 

Answer 1

Vous avez deux, contradictoires onMouseOver attributs. Au lieu de faire cela, pourquoi ne pas utiliser la :hover pseudo-classe?

tr { 
    background-color: #363636; 
} 

tr:hover { 
    background-color: gold; 
    color: #ffffff; 
} 

Si vous voulez vraiment utiliser onMouseOver, vous pouvez le faire:

oneMouseOver="this.bgColor='gold'; this.color='#ffffff';"; 

Answer 2

Utilisation this.style.color au lieu de this.color, et vous pouvez le mettre dans le même attribut:

onMouseOver="this.bgColor='gold'; this.style.color='#fff';" 

Par ailleurs essayer d'éviter en ligne javascript comme ça, si vous avez une séparation entre html/css et votre code javascript.

Answer 3

Vous pouvez utiliser css:

tr:hover { 
    color: White; 
} 

Tous vos articles peuvent être refait avec CSS

tr { 
    background-color: #363636; 
} 

tr:hover { 
    background-color: Gold; 
    color: White; 
} 

Answer 4

Selon si vous avez plusieurs colonnes dans chaque ligne que vous pouvez mettre à jour le style du texte de plusieurs façons différentes. J'ai testé les deux dans JSFiddle et ils fonctionnent tous les deux.

Si vous ne souhaitez que la couleur mise à jour quand une cellule particulière est moucheté sur:

<tr class="active" bgcolor="#363636" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#363636';" > 
     <td onMouseOver="this.style.color='#fff';" onMouseOut="this.style.color='#000';"> 
     hey 
     </td> 
    </tr> 

et si vous voulez la couleur mis à jour lorsqu'une cellule de la ligne est moucheté sur:

<tr class="active" bgcolor="#363636" 
    onMouseOver="this.bgColor='gold';this.style.color='#fff';" 
    onMouseOut="this.bgColor='#363636';this.style.color='#000';">