Obtention d'une cellule de table pour devenir une couleur différente au passage de la souris

Question

Actuellement, lorsque je crée une table et que je souris sur une cellule, cette ligne entière est mise en surbrillance. J'essaie de faire en sorte que ce soit seulement la cellule immédiate. Voici tout le code CSS qui se rapporte à des tables dans ma feuille de style:

table{margin:.5em 0 1em;} 
table td,table th{text-align:center;border-right:1px solid #fff;padding:.4em .8em;} 
table th{background-color:#5e5e5e;color:#fff;text-transform:uppercase;font-weight:bold;border- bottom:1px solid #e8e1c8;} 
table td{background-color:#eee;} 
table th a{color:#d6f325;} 
table th a:hover{color:#fff;} 
table tr.even td{background-color:#ddd;} 
table tr:hover td{background-color:#fff;} 

table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle tr:hover td{border:0;background:none;background-color:transparent;} 

Je sais qu'il est probablement une solution simple mais je ne peux pas trouver où faire fonctionner. Tout ce que j'essaie tue complètement l'effet mouseover plutôt que de le faire comme je le veux.

Answer 1

changement

table tr:hover td{background-color:#fff;} 

Pour

table td:hover <strike>td</strike>{background-color:#fff;} 

Cela devrait mettre en évidence la cellule et non pas la ligne entière.

La mise à jourtr:hover a été mentionnée deux fois. En outre, il devrait être td:hover, pas td:hover td. Cela devrait fonctionner:

table{margin:.5em 0 1em;} 
table td,table th{text-align:center;border-right:1px solid #fff;padding:.4em .8em;} 
table th{background-color:#5e5e5e;color:#fff;text-transform:uppercase;font-weight:bold;border- bottom:1px solid #e8e1c8;} 
table td{background-color:#eee;} 
table th a{color:#d6f325;} 
table th a:hover{color:#fff;} 
table tr.even td{background-color:#ddd;} 
table td:hover {background-color:#fff;} 

table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle td{border:0;background:none;background-color:transparent;}