web-dev-qa-db-fra.com

Pourquoi le survol CSS ne fonctionne-t-il pas sur les lignes d'un tableau lorsque les cellules à l'intérieur des lignes ont des noms de classe?

Je suis coincé avec ce problème alors toute aide serait appréciée. J'ai une table avec plusieurs lignes. Chaque cellule de la ligne appartient à une certaine classe. J'utilise ces noms de classe pour colorer les cellules.

Voici un exemple de ligne de ma table:

<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>

J'aimerais mettre en surbrillance chaque ligne lorsque l'utilisateur déplace le pointeur de la souris sur une cellule de cette ligne. J'ai donc utilisé le code CSS suivant pour y parvenir.

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

malheureusement, il semble que chaque cellule de données de table ayant un nom de classe, le survol ne fonctionne pas. Mais si je supprime les noms de classe des cellules de données, le survol fonctionne.

Ma question est la suivante: y a-t-il moyen de faire fonctionner le survol pour la ligne du tableau tout en conservant les noms de classe pour les cellules de données du tableau à l'intérieur de la ligne.

csshtml-tablehover
21
Vicer

Essaye ça:

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

Placez ceci après les déclarations de style td existantes pour être sûr

58
Nick Craver

Les instructions CSS dans le nom de la classe ont priorité sur les instructions <tr>.

Pour résoudre ce problème, utilisez td.summarypage-odd-column: hover, td.summarypage-even-column: survolez votre CSS.

Remarque: Si vous utilisez IE6, le: hover ne fonctionne que sur les liens, c’est-à-dire a: hover.

0
Sarhanis

Je pense que la couleur de fond td remplace la couleur de fond tr. La solution donnée par @Nick Craver est la bonne.
Vous devez changer la couleur de fond des cellules et non la couleur de fond de la ligne.

tr:hover td {
   ...
}
0
Luis Tark

ne jamais mettre d'espace entre 

tr:hover(space)td

Je donnais de la place donc ça fonctionnait pour moi. 

0
Saras Arya

Cela n'arrive pas pour moi. Assurez-vous que vous ajoutez/supprimez uniquement les noms de classes lorsque vous vérifiez si elles ont un impact, et assurez-vous que les tds n'ont pas leur propre arrière-plan recouvrant celui de la tr.

0
Matchu

Vous devez probablement utiliser le désignateur! Important pour vous assurer que votre style de survol a priorité sur le fond défini dans la classe:

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

Fait intéressant, cela ne fonctionnera pas pour IE6 car ce navigateur ne s'applique au survol que des balises.

0
BC.