Wie wende ich :hover-Stile auf :before und :after Pseudoelemente an?

:hover-Bedingung für :before- und :after-Elemente

Problem

Sie haben Schwierigkeiten, „:hover“ auf „:before“ anzuwenden Elemente. Versuche, „:before:hover“ zu verwenden, haben sich als erfolglos erwiesen.

Erklärung

Die korrekte Syntax zum Anwenden von Stilen auf „:before“-Elemente basierend auf dem „:hover“-Status des übergeordneten Elements ist a :hover:before oder a:visited:before. Das Pseudoelement wird am Ende des Selektors nach der Pseudoklasse angehängt.

In CSS3 können Sie diese Unterscheidung verdeutlichen, indem Sie Doppelpunkte (::) zur Darstellung von Pseudoelementen verwenden. Daher lautet die korrekte Syntax a:hover::before und a:visited::before. Einzelne Doppelpunkte sind jedoch weiterhin für ältere Browser wie IE8 akzeptabel.

Diese Syntax wird durch die CSS-Spezifikation vorgegeben, die besagt, dass Pseudoelemente an die endgültige Sequenz einfacher Selektoren angehängt werden müssen.

Einschränkung

Beachten Sie, dass der obige Ansatz möglicherweise nicht für Benutzeraktions-Pseudoklassen wie „:hover“ geeignet ist, wenn Sie den Effekt nur dann anwenden möchten, wenn Mit dem Pseudoelement selbst wird interagiert. Dies ist derzeit über Standard-CSS-Mechanismen nicht möglich. In solchen Fällen müssen Sie möglicherweise ein tatsächliches untergeordnetes Element anstelle eines Pseudoelements verwenden, um „:hover“ anzuwenden.

Das obige ist der detaillierte Inhalt vonWie wende ich :hover-Stile auf :before und :after Pseudoelemente an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!