Wie schreibt man :hover
und :visited
Bedingung für a:before
?
Ich versuche a:before:hover
aber es funktioniert nicht
Das hängt davon ab, was Sie eigentlich tun wollen.
Wenn Sie einfach nur Stile auf ein :before
Pseudo-Element anwenden wollen, wenn das a
Element einer Pseudo-Klasse entspricht, müssen Sie stattdessen a:hover:before
oder a:visited:before
schreiben. Beachten Sie, dass das Pseudo-Element nach der Pseudo-Klasse kommt (und zwar ganz am Ende des gesamten Selektors). Beachten Sie auch, dass es sich um zwei verschiedene Dinge handelt; sie beide "Pseudo-Selektoren" zu nennen, wird Sie verwirren, sobald Sie auf Syntaxprobleme wie dieses stoßen.
Wenn Sie CSS3 schreiben, können Sie ein Pseudo-Element mit doppelten Doppelpunkten bezeichnen, um diese Unterscheidung deutlicher zu machen. Daher: "a:hover::before" und "a:visited::before". Wenn Sie jedoch für ältere Browser wie IE8 und ältere Versionen entwickeln, können Sie sich mit einfachen Doppelpunkten begnügen.
Diese spezifische Reihenfolge der Pseudoklassen und Pseudoelemente ist in der [spec] (http://www.w3.org/TR/selectors/#selector-syntax) festgelegt:
Ein Pseudo-Element kann an die letzte Folge von einfachen Selektoren in einem Selektor angehängt werden.
Eine Sequenz von einfachen Selektoren ist eine Kette von einfachen Selektoren, die nicht durch einen Kombinator getrennt sind. Sie beginnt immer mit einem Typselektor oder einem Universalselektor. Kein anderer Typselektor oder Universalselektor ist in der Sequenz erlaubt.
Ein einfacher Selektor ist entweder ein Typselektor, Universalselektor, Attributselektor, Klassenselektor, ID-Selektor oder eine Pseudoklasse.
Eine Pseudoklasse ist ein einfacher Selektor. Ein Pseudo-Element hingegen nicht, auch wenn es einem einfachen Selektor ähnelt.
Bei Pseudoklassen für Benutzeraktionen wie :hover
1 ist es jedoch nicht möglich, diesen Effekt nur anzuwenden, wenn der Benutzer mit dem Pseudoelement selbst interagiert, nicht aber mit dem a
-Element, es sei denn, durch eine obskure layoutabhängige Umgehung. Wie der Text andeutet, können Standard-CSS-Pseudoelemente derzeit keine Pseudoklassen haben. In diesem Fall müssen Sie `:hover" auf ein tatsächliches Kindelement anstelle eines Pseudoelements anwenden.
11 Natürlich gilt dies nicht für Link-Pseudo-Klassen wie :visited
wie in der Frage, da Pseudo-Elemente keine Links sind.
Schreiben Sie a:hover::before
anstelle von a::before:hover
: [Beispiel](
Um den Text des Menülinks bei Mouseover zu ändern. (Text in anderer Sprache bei Mouseover) hier ist die
[jsfiddle Beispiel][1]
html:
<a align="center" href="#"><span>kannada</span></a>
css:
span {
font-size:12px;
}
a {
color:green;
}
a:hover span {
display:none;
}
a:hover:before {
color:red;
font-size:24px;
content:"ಕನ್ನಡ";
}