classes dans pseudo-classe

Question

Je suis intéressé par la construction d'une barre de menu qui est rétrocompatible. Je voudrais juste utiliser HTML et CSS. Donc je pense à une table avec un nombre de cellules, chacune avec une couleur bkgnd différente en fonction de son état. Quelque chose le long des lignes de ....

a:link { 
.cell01{background-color:#white}; 
.cell02{background-color:#white}; 
} 

a:hover { 
.cell01{background-color:#red}; 
.cell02{background-color:#blue}; 
} 

(je pense quelque chose comme ça que je veux à l'ensemble de la cellule, non seulement le texte dans la cellule à effectuer). Évidemment, cet exemple ne fonctionne pas ... mais y a-t-il un moyen?

Merci à l'avance

Giles

Answer 1

Je suppose votre HTML ressemble à ceci:

<table> 
    <td class="cell1"> 
     <a href="#">Link</a> 
    </td> 
    <td class="cell2"> 
     <a href="#">Link</a> 
    </td> 
</table> 

Si tel est le cas, ce que vous demandez est impossible avec HTML et CSS seul . CSS ne vous permet pas de cibler les parents d'un sélecteur de quelque façon que ce soit. JQuery peut faire ce que vous demandez en utilisant .parent()

Answer 2

Si vous souhaitez affecter l'ensemble de la cellule, vous devez appliquer le CSS au parent. Ensuite, les balises enfant <a> peuvent agir séparément. Quelque chose comme ceci:

parentCell { background:white; } 

parent1:hover { background:red } 
parent2:hover { background:blue } 

parent1:hover a { font-weight:bold } 
parent2:hover a { font-style:italic } 

Answer 3

Vous ne devriez probablement pas penser à une table de toute façon. Vous pouvez facilement mettre en forme un UL pour avoir l'apparence de la navigation et ceci est beaucoup plus sémantiquement correct.

Quoi qu'il en soit - à partir du CSS ci-dessus, je suppose que vous avez une table à l'intérieur de votre lien? Si oui, alors la syntaxe correcte serait:

a:link .cell01 { background-color: #fff; } 
a:hover .cell01 { background-color: #f00; } 

etc etc

(si vous souhaitez utiliser des noms de couleur, alors vous n'utilisez pas le symbole # Si vous utilisez des valeurs hexagonales puis utilisez le #. comme je l'ai fait ci-dessus).

Ou avez-vous des liens dans les cellules? Dans ce cas, vous devez inverser les éléments par ex.

.cell01 a:link {background-color: white; } 

Espérons que ça aide!

---

Mise à jour:

Ahh - La réponse de Steve me donne ci-dessus une idée un peu mieux de ce que vous essayez de faire ... Vous avez les liens au sein de la cellule du tableau et que vous voulez la cellule entière changer quand il est plané? Ensuite, il suffit:

.cell01 { background-color: #fff; } 
.cell02:hover { background-color: #f00; } 

Notez que cela comme dans IE6 ne fonctionnera pas correctement sur IE6 seulement A éléments ont l'état de vol stationnaire. Vous pouvez contourner ce problème en ajoutant une classe supplémentaire en Javascript si nécessaire ...

Answer 4

Premièrement: n'utilisez pas de tables pour la mise en page ou la navigation. Il n'y a pas besoin de ça. UL est généralement le meilleur choix pour la tâche. Deuxièmement: faites en sorte que le niveau d'un bloc d'éléments et le rembourrage et le style que vous souhaitez: http://kod.as/lab/nav/

Voir http://css.maxdesign.com.au/listamatic/ pour en savoir plus.