tr:hover ne fonctionne pas

Question

tr:hover ne fonctionne pas

Demandé el 22 de Septembre, 2011: Quand la question a-t-elle été
110233 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

J'essaie de mettre en évidence (changer la couleur de fond) la ligne entière lorsque la souris passe sur une ligne du tableau. J'ai cherché sur le Net et cela devrait fonctionner, mais ce n'est pas le cas. Je l'affiche sur Chrome.

<table class="list1">
<tr>
   <td>1</td><td>a</td>
</tr>
<tr>
   <td>2</td><td>b</td>
</tr>
<tr>
   <td>3</td><td>c</td>
</tr>
</table>

mon css :

.list1 tr:hover{
background-color:#fefefe;
}

Le css correct devrait être :

.list1 tr:hover td{
background-color:#fefefe;
}

//--this css for the td keeps overriding the one i showed earlier
.list1 td{
background-color:#ccc000;
}

Merci pour les commentaires !

Demandé el 22 de Septembre, 2011 par LC Yoong

Answer 1

5 Réponses

Answer 2

136voto

David Peters Points 297

Votre meilleure chance est d'utiliser

table.YourClass tr:hover td {
background-color: #FEFEFE;
}

Les rangées ne prennent pas entièrement en charge la couleur d'arrière-plan, mais les cellules le font. L'utilisation de la combinaison de :hover et de l'élément enfant donnera les résultats dont vous avez besoin.

Répondu el 4 de Avril, 2013 par David Peters (297 Points )

Answer 3

6voto

Yvette Points 61

Vous devez utiliser <!DOCTYPE html> pour que la fonction :hover fonctionne avec autre chose que la fonction <a> étiquette. Essayez de l'ajouter en haut de votre HTML.

Répondu el 13 de Juin, 2014 par Yvette (61 Points )

Answer 4

6voto

Shawn Points 204

Intente

.list1 tr:hover td{
    background-color:#fefefe;
}

Répondu el 29 de Décembre, 2016 par Shawn (204 Points )

Answer 5

3voto

Sanooj Points 2052

tr:hover ne fonctionne pas dans les anciens navigateurs.

Vous pouvez utiliser jQuery pour cela :

.tr-hover
{  
  background-color:#fefefe;
}

$('.list1 tr').hover(function()
{
    $(this).addClass('tr-hover');
},function()
{
    $(this).removeClass('tr-hover');
});

Répondu el 22 de Septembre, 2011 par Sanooj (2052 Points )

Answer 6

1voto

JNDPNT Points 3496

Cela fonctionne bien pour moi... Le site tr:hover devrait fonctionner. Probablement que ça ne marchera pas parce que :

La couleur de fond que vous avez définie est très claire. Vous ne l'utilisez pas sur un fond blanc, n'est-ce pas ?
Votre <td> Les balises ne sont pas fermées correctement.

Veuillez noter que le survol d'un <tr> ne fonctionnera pas dans les anciens navigateurs.

Répondu el 22 de Septembre, 2011 par JNDPNT (3496 Points )

tr:hover ne fonctionne pas

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

tr:hover ne fonctionne pas

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: