voulez changer l'arrière-plan de la table td sur hover

Question

J'ai une page Web qui affiche un calendrier, et je veux changer la couleur de fond de n'importe quel td qui a leur numéro de jour lié, donc quand je passe la souris sur ce jour, il change la couleur de fond.

Je pensais que cela fonctionnerait:

.main-calendar td { 
    width:14%; 
    height:100px; 
    text-align:center; 
    border:1px solid #000; 
    font-size:20px; 
    vertical-align:middle; 
    display:block; 
} 

table.main-calendar td a:hover, 
table.main-calendar td a:visited { 
    display:block; 
    text-decoration:none; 
    background-color:red; 
    color:#fff; 
} 

table.main-calendar td a:link { 
    display:block; 
    text-decoration:none; 
    background-color:green; 
    color:#fff; 
} 

Toute aide est appréciée.

Answer 1

me semble que vous devriez juste changer l'ordre des deux dernières règles. Toutes les autres choses étant égales, vous devez déclarer: link before: hover et: visited, sinon il est surclassé par la cascade.

Answer 2

Avez-vous essayé

table.main-calendar td:hover a 

?

Que dit Firebug?

Answer 3

Votre code met à jour la couleur de fond du lien, et non de la cellule entière de la table, parce que le CSS correspond aux <un> éléments (pas leur <td> parents). En général, il n'y a aucun moyen de CSS pour sélectionner un élément sur cette base des enfants (voir Complex CSS selector for parent of active child), de sorte que vous même si vous pouvez (en supposant que vous ne se soucient pas IE6) écrire une règle pour

table.main-calendar td:hover 

et l'ont fort la cellule lorsque vous passez la souris dessus, vous ne pouvez pas déterminer si cette cellule contient un lien (visité ou non).

Vous devrez donc opter pour une approche alternative, soit en faisant en sorte que le lien occupe la totalité de la cellule du tableau (s'il n'y a qu'un seul lien par cellule) ou en utilisant une sorte de JavaScript.

Answer 4

Notez que dans IE6, la propriété hover n'est reconnue que sur les points d'ancrage. Alors soyez prudent en utilisant le vol stationnaire sur les non-ancres pour communiquer des informations essentielles. Si ce n'est pas essentiel, allez-y et appliquez hover sur le td.