Warum unterstreicht mein CSS-Hovercode meinen Link nicht?

„Hover“ in CSS verstehen

Bei der Arbeit mit CSS ist „Hover“ ein entscheidendes Konzept zum Ändern von Elementstilen bei Mausinteraktion. Um das gewünschte Ergebnis zu erzielen, ist jedoch eine korrekte Implementierung erforderlich.

Das „Hover“-Rätsel

Kürzlich wurde eine Anfrage bezüglich der Unfähigkeit des folgenden Codes gestellt, einen Link beim Hover zu unterstreichen:

<a class="hover">click</a>

a .hover:hover {
    text-decoration: underline;
}

Enthüllung der Lösung

Um das Problem zu beheben, müssen wir bedenken, dass „Hover“ ein Problem ist Pseudoelement. Die korrekte Syntax lautet:

a:hover {
    text-decoration: underline;
}

Alternativ, wenn ein Klassenname bevorzugt wird:

a.hover:hover {
    text-decoration: underline;
}

Der „schwebende“ Klassenname

Während der Verwendung einer Klasse -name wie „hover“ mag überflüssig erscheinen, er kann in Situationen angewendet werden, in denen Sie beim Hover mehrere Eigenschaften umschalten möchten, indem Sie eine separate CSS-Regel für „.hover“ verwenden. Wenn die einzige Absicht jedoch darin besteht, einen Link beim Hover zu unterstreichen, bleibt der a:hover-Selektor die bevorzugte Wahl.

Das obige ist der detaillierte Inhalt vonWarum unterstreicht mein CSS-Hovercode meinen Link nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!