web-dev-qa-db-fra.com

Définir un: survol basé sur 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>

En CSS, je souhaite définir le a:hover pour ces éléments de menu sur une couleur particulière. Alors j'écris:

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

Mais, je veux définir cette couleur a:hover uniquement pour les balises <a> avec la classe main-nav-item et non avec main-nav-item-current, car elle a une couleur différente et ne devrait pas ' t changer en vol stationnaire. Toutes les balises <a> de la division menu doivent changer de couleur en survol, sauf celle de la classe current.

Comment puis-je le faire en utilisant CSS?

J'ai essayé quelque chose comme

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

en pensant que seuls ceux avec la classe main-nav-item changeront de couleur en survol, et non celui en cours. Mais ça ne fonctionne pas.

htmlcsscolorshoveranchor
44
anon355079

Essaye ça:

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

Pour comprendre comment cela fonctionne, il est important de le lire comme le fait le navigateur. La a définit l'élément, le .main-nav-item qualifie l'élément uniquement pour ceux qui ont cette classe et enfin le psuedo-class :hover est appliqué à l'expression qualifiée qui précède.

En gros, cela se résume à ceci:

Appliquez cette règle de survol à tous les éléments d'ancrage de la classe main-nav-item qui sont des enfants descendants de tout élément de la classe menu.

84
Andrew Hare

La cascade vous mord. Essaye ça:

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

Ce code dit de saisir tous les liens qui ont une classe de main-nav-item ET sont des enfants du menu de la classe et d'appliquer la couleur #DDD quand ils sont survolés.

9
Scott Radcliff

vous pouvez simplement essayer:

a.main-nav-item:hover { }
1
Rizo

Une erreur courante est de 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'écririez pas 

.menu a .main-nav-item:hover

ce serait 

.menu a.main-nav-item:hover
0
DanDan

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

cela maintient la spécificité faible 

0
Aleksej Dix