webentwicklung-frage-antwort-db.com.de

Wie schreibe ich: Hover-Bedingung für ein: vor und ein: nach?

Wie schreibe ich :hover und :visited Bedingung für a:before?

Ich versuche a:before:hover, aber es funktioniert nicht

299
Jitendra Vyas

Dies hängt davon ab, was Sie tatsächlich versuchen.

Wenn Sie einfach Stile auf ein :before-Pseudoelement anwenden möchten, wenn das a-Element mit einer Pseudoklasse übereinstimmt, müssen Sie stattdessen a:hover:before oder a:visited:before schreiben. Beachten Sie, dass das Pseudoelement nach der Pseudoklasse kommt (und tatsächlich ganz am Ende des gesamten Selektors). Beachten Sie auch, dass es sich um zwei verschiedene Dinge handelt. Wenn Sie beide als "Pseudo-Selektoren" bezeichnet werden, werden Sie verwirrt, sobald Sie auf Syntaxprobleme wie dieses stoßen.

Wenn Sie CSS3 schreiben, können Sie ein Pseudoelement mit Doppelpunkten angeben, um diese Unterscheidung klarer zu machen. Daher a:hover::before und a:visited::before. Wenn Sie jedoch für ältere Browser wie IE8 und älter entwickeln, können Sie einfach mit Doppelpunkten arbeiten.

Diese spezifische Reihenfolge von Pseudoklassen und Pseudoelementen ist in der spec angegeben:

Ein Pseudoelement kann an die letzte Sequenz 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. Es beginnt immer mit einem Typenwahlschalter oder einem Universalwahlschalter. In der Sequenz ist kein anderer Typenwahlschalter oder Universalwahlschalter zulässig.

Ein einfacher Selektor ist entweder ein Typselektor, ein Universalselektor, ein Attributselektor, ein Klassenselektor, ein ID-Selektor oder eine Pseudoklasse. 

Eine Pseudoklasse ist eine einfache Auswahl. Ein Pseudoelement ist jedoch nicht, obwohl es einem einfachen Selektor ähnelt.

Für Benutzeraktionen-Pseudoklassen wie :hover1Wenn Sie diesen Effekt benötigen, um only anzuwenden, wenn der Benutzer mit dem Pseudoelement selbst, nicht jedoch mit dem Element a interagiert, ist dies nur durch eine obskure layoutabhängige Problemumgehung möglich. Wie der Text impliziert, können Standard-CSS-Pseudoelemente derzeit keine Pseudoklassen haben. In diesem Fall müssen Sie anstelle eines Pseudoelements :hover auf ein tatsächliches untergeordnetes Element anwenden.


1Dies gilt natürlich nicht für Link-Pseudo-Klassen wie :visited wie in der Frage, da Pseudo-Elemente keine Links sind.

436
BoltClock

Schreibe a:hover::before statt a::before:hover: example .

84
sandeep

So ändern Sie den Text des Menülinks beim Mouseover. (Unterschiedlicher Sprachentext im Hover) .__ 

jsfiddle Beispiel

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:"ಕನ್ನಡ";
}
5
Rao

Versuchen Sie, .card-listing:hover::afterhover und after mit :: zu verwenden, es wird funktionieren

3
subindas pm

Die Antwort von BoltClock ist richtig. Das einzige, was ich anfügen möchte, ist, wenn Sie nur das Pseudoelement auswählen möchten, setzen Sie es in einen Bereich. 

Zum Beispiel: 

<li><span data-icon='u'></span> List Element </li>

anstatt:

<li> data-icon='u' List Element</li>

Auf diese Weise kannst du es einfach sagen

ul [data-icon]:hover::before {color: #f7f7f7;}

dadurch wird nur das Pseudoelement hervorgehoben, nicht das gesamte Element li

0
bbrinx