Définir un: hover basé sur la classe

Question

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

En CSS, je veux régler la a:hover pour ces éléments de menu à une couleur particulière. Alors j'écris:

.menu a:hover 
{ 
    color:#DDD; 
} 

Mais, je veux mettre cette couleur a:hover uniquement pour les <a> étiquettes avec la classe principale-nav-article et non le principal nav-élément courant, parce qu'il a une couleur différente et ne devrait pas changer en stationnaire. Toutes les étiquettes <a> dans le menu div devraient changer de couleur en survol à l'exception de celui avec le courant classe.

Comment puis-je le faire en utilisant CSS?

J'ai essayé quelque chose comme

.menu a:hover .main-nav-item 
{ 
    color:#DDD; 
} 

penser que seuls avec classe principale-nav-élément change de couleur sur le vol stationnaire, et non l'actuel. Mais ça ne fonctionne pas.

Answer 1

Essayez ceci:

.menu a.main-nav-item:hover { } 

Pour comprendre comment cela fonctionne, il est important de lire la façon dont le navigateur ne. Le a définit l'élément, le .main-nav-itemqualifie l'élément à seulement ceux qui ont cette classe, et finalement la classe :hover de psuedo est appliquée à l'expression qualifiée qui vient avant.

Fondamentalement, il se résume à ceci:

Appliquer cette règle de vol stationnaire à tous les éléments d'ancrage avec la classe main-nav-item qui sont un enfant descendant d'un élément avec la classe menu.

Answer 2

Cascading vous mord. Essayez ceci:

.menu > .main-nav-item:hover 
    { 
     color:#DDD; 
    } 

Ce code dit de saisir tous les liens qui ont une classe de main-nav-point et sont les enfants du menu de classe et appliquer la #DDD couleur quand ils sont plané.

Answer 3

Une erreur courante consiste à laisser un espace avant les noms de classe. Même si c'était la syntaxe correcte:

.menu a:hover .main-nav-item 

cela n'aurait jamais fonctionné.

Par conséquent, vous n'écrire

.menu a .main-nav-item:hover 

il serait

.menu a.main-nav-item:hover 

Answer 4

que diriez-vous .main-nav-item:hover

ce qui maintient la spécificité faible

Answer 5

vous pouvez simplement essayer:

a.main-nav-item:hover { }