Legen Sie a:hover basierend auf der Klasse fest

Question 1

Ich habe folgenden HTML-Code:

<div class="menu">
    <a class="main-nav-item" href="https://stackoverflow.com/questions/1935820/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 das einstellen a:hover für diese Menüpunkte auf eine bestimmte Farbe. Also schreibe ich:

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

Das möchte ich aber einstellen a:hover Farbe nur für diese <a> Tags mit der Klasse main-nav-item und nicht die main-nav-item-current, weil es eine andere Farbe hat und sich beim Hover nicht ändern sollte. Alle <a> Tags innerhalb der Speisekarte div sollte beim Hover die Farbe ändern, außer dem mit dem aktuell Klasse.

Wie kann ich das mit CSS machen?

Ich habe so etwas versucht

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

Denken Sie, dass nur diejenigen mit der Hauptnavigationselementklasse beim Schweben die Farbe ändern, und nicht die aktuelle. Aber es funktioniert nicht.

Question 2

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. Das a definiert das Element, die .main-nav-item qualifiziert das Element nur denen, die diese Klasse haben, und schließlich der Pseudo-Klasse :hover wird auf den qualifizierten Ausdruck angewendet, der davor steht.

Im Grunde läuft es darauf hinaus:

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

Question 3

Cascading beißt dich. Versuche dies:

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

Dieser Code besagt, dass alle Links, die eine Klasse von main-nav-item haben UND untergeordnete Elemente des Klassenmenüs sind, abgerufen und die Farbe #DDD angewendet werden sollen, wenn sie mit der Maus bewegt werden.

Question 4

Setzen Sie a:hover basierend auf der Klasse, die Sie einfach ausprobieren können:

a.main-nav-item:hover { }

Question 5

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

dies hält die Spezifität gering

Question 6

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. a:hover macht das Ding, es gibt dem Hintergrund eine vampirschwarze Farbe und dem Text eine weiße Farbe, wenn die Maus darüber bewegt wird, das ist, was Hover bedeutet.

Question 7

Ein häufiger Fehler besteht darin, vor den Klassennamen ein Leerzeichen zu lassen. Auch wenn dies die korrekte Syntax wäre:

.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

Question 8

Ich fand, wenn Sie a hinzufügen !importantes funktioniert, wenn es vorher nicht funktioniert hat.

    a.main-nav-item:link {
      color: blue !important; 
    }
    a.main-nav-item:visited {
      color: red !important; 
    }
    a.main-nav-item:hover {
      color: purple !important; 
    }
    a.main-nav-item:focus {
      color: green !important; 
    }
    a.main-nav-item:active {
      color: green !important; 
    }

Außerdem habe ich irgendwo gelesen, dass die Reihenfolge wichtig ist. Die Merkhilfe „LoVe HaTe“ hilft dabei, sich daran zu erinnern: Link -> besucht -> Hover -> aktiv