Set a:hover en fonction de la classe
J'ai le code HTML suivant:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
Dans le CSS, je veux mettre le a:hover
pour ces éléments de menu à une couleur particulière. J'ai donc écrire:
.menu a:hover
{
color:#DDD;
}
Mais, je tiens à mettre ce a:hover
de la couleur seulement pour ceux <a>
balises avec la classe main-nav-item et pas le main-nav-item-courant, parce qu'il a une couleur différente et ne devrait pas changer sur le vol stationnaire. Tous les <a>
des balises dans les menu div devrait changer de couleur sur le vol stationnaire à l'exception de celui avec le actuel classe.
Comment puis-je le faire à l'aide de CSS?
J'ai essayé quelque chose comme
.menu a:hover .main-nav-item
{
color:#DDD;
}
de penser que les seuls à avoir la main-nav-item de classe va changer de couleur sur le vol stationnaire, et non pas l'actuel. Mais ça ne fonctionne pas.
Vous devez vous connecter pour publier un commentaire.
Essayez ceci:
Afin de comprendre comment cela fonctionne, il est important de lire cette manière, le navigateur n'. Le
a
définit l'élément, le.main-nav-item
qualifie l'élément à seulement ceux qui ont la classe, et enfin la pseudo-classe:hover
est appliqué à l'qualifié expression qui vient avant.Fondamentalement, il se résume à ceci:
En cascade est à vous mordre. Essayez ceci:
Ce code dit de saisir tous les liens qui ont une classe de main-nav-item ET sont les enfants de la classe menu, et appliquez la couleur #DDD quand ils sont plané.
Ensemble a:hover en fonction de la classe, vous pouvez simplement essayer de:
essayer cette
permet de dire que nous avons une balise d'ancrage utilisé dans notre code et de la classe"div" est appelé dans le programme principal. le a:hover va faire la chose, il va donner un vampire de couleur noire à l'arrière-plan et la couleur blanche pour le texte lorsque la souris est déplacée au-dessus d'elle c'est ce que hover moyens.
Une erreur courante est de laisser un espace avant les noms de classe. Même si ce n'est la syntaxe correcte:
il ne se serait jamais travaillé.
Par conséquent, vous n'écrirez pas
il serait
comment sur
.main-nav-item:hover
cela permet de maintenir la spécificité faible