wake-up-neo.net

Legen Sie a: hover basierend auf der Klasse fest

Ich habe folgendes HTML:

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

In CSS möchte ich den a:hover für diese Menüelemente auf eine bestimmte Farbe setzen. Also schreibe ich:

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

Aber ich möchte diese a:hover-Farbe nur für diese <a>-Tags mit der Klasse main-nav-item und nicht für main-nav-item-current festlegen, da sie eine andere Farbe hat und nicht ' t auf hover wechseln. Alle <a>-Tags im menu div sollten die Farbe des Hovers ändern, mit Ausnahme des Tags mit der current class.

Wie mache ich das mit CSS?

Ich habe so etwas ausprobiert

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

ich denke, dass nur diejenigen mit der Haupt-Nav-Element-Klasse beim Schweben die Farbe ändern und nicht die aktuelle. Aber es funktioniert nicht.

htmlcsscolorshoveranchor
44
anon355079

Versuche dies:

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

Um zu verstehen, wie dies funktioniert, ist es wichtig, dies so zu lesen, wie es der Browser tut. Die a definiert das Element, das .main-nav-item qualifiziert das Element nur für diejenigen, die diese Klasse haben, und schließlich wird die Pseudo-Klasse :hover auf den zuvor angegebenen qualifizierten Ausdruck angewendet.

Im Grunde läuft es darauf hinaus:

Wenden Sie diese Hover-Regel auf alle Ankerelemente mit der Klasse main-nav-item an, die ein untergeordnetes untergeordnetes Element eines Elements mit der Klasse menu sind.

84
Andrew Hare

Kaskadierung beißt dich. Versuche dies:

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

Dieser Code besagt, dass alle Links, die eine Klasse mit dem Hauptnavigabeobjekt AND haben, untergeordnet werden, und dass die Farbe #DDD angewendet wird, wenn sie im Schwebeflug sind.

9
Scott Radcliff

versuche dies

.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}

.div a:hover
{
background-color:#080808;
color:white;
}

nehmen wir an, wir haben ein Anker-Tag in unserem Code und die Klasse "div" wird im Hauptprogramm aufgerufen. Das a: hover erledigt die Sache, es gibt dem Hintergrund eine vampirschwarze Farbe und dem Text eine weiße Farbe, wenn die Maus darüber bewegt wird.

2
KNiF3

sie können einfach versuchen:

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

Ein häufiger Fehler ist ein Leerzeichen vor den Klassennamen. Auch wenn dies die richtige Syntax war:

.menu a:hover .main-nav-item

es hätte nie funktioniert.

Deshalb würden Sie nicht schreiben 

.menu a .main-nav-item:hover

es wäre 

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

wie wäre es mit .main-nav-item:hover

dies hält die Spezifität gering 

0
Aleksej Dix