Wie schreibe ich: Schwebebedingung für a: vorher und a: nachher?

346

Wie schreibe :hoverund :visitedkonditioniere ich a:before?

Ich versuche es, a:before:hoveraber es funktioniert nicht

css css-selectors pseudo-element pseudo-class Jitendra Vyas
quelle

Antworten:

488

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

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

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

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

Ein Pseudoelement kann an die letzte Folge einfacher Selektoren in einem Selektor angehängt werden.

Eine Folge einfacher Selektoren ist eine Kette einfacher Selektoren, die nicht durch einen Kombinator getrennt sind. Es beginnt immer mit einem Typwähler oder einem Universalwähler. In der Sequenz ist kein anderer Typ- oder Universalwähler zulässig.

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

Eine Pseudoklasse ist ein einfacher Selektor. Ein Pseudoelement ist es jedoch nicht, obwohl es einem einfachen Selektor ähnelt.

Wenn Sie jedoch für Benutzeraktions-Pseudoklassen wie :hover1 diesen Effekt nur anwenden müssen , wenn der Benutzer mit dem Pseudoelement selbst, aber nicht mit dem aElement interagiert , ist dies nur durch eine obskure, vom Layout abhängige Problemumgehung möglich . Wie aus dem Text hervorgeht, können Standard-CSS-Pseudoelemente derzeit keine Pseudoklassen haben. In diesem Fall müssen Sie :hoverein tatsächliches untergeordnetes Element anstelle eines Pseudoelements anwenden .

1 Dies gilt natürlich nicht für Verknüpfungspseudoklassen :visitedwie in der Frage, da Pseudoelemente keine Verknüpfungen sind.

BoltClock
quelle
27
Es sollte darauf hingewiesen werden, dass dadurch der Schwebeflug auf das übergeordnete Element gesetzt wird - wodurch die Dekoration angewendet wird, selbst wenn sich das :: after-Pseudoelement nicht unter der Maus befindet, solange sich das übergeordnete Element befindet.
SamGoody
6
Es sollte auch beachtet werden, dass es eine Reihe von Dingen gibt, die aufgrund der Art und Weise, wie die Layoutregeln angegeben werden , nicht darauf reagieren - z text-decoration.
Chris Krycho
1
@ Chris Krycho: In der Tat - ich habe tatsächlich eine Erklärung für dieses spezielle Problem in Bezug auf Pseudoelemente hier . Natürlich sollte klargestellt werden, dass das Problem selbst keine Verbindung zu Pseudoklassen- / Pseudoelement- Selektoren hat , sondern, wie Sie hervorheben , ein Layoutproblem ist.
BoltClock
@BoltClock Ich habe diese Antwort sehr kurz nachdem ich diesen Kommentar hinterlassen habe, positiv bewertet . Huzzah.
Chris Krycho
2
Ein Doppelpunkt (:) bezeichnet Pseudoklassen und Doppelpunkt (: :) bezeichnet Pseudoelemente. Also sollte es ein:
hover
107

Schreiben a:hover::beforestatt a::before:hover: Beispiel .

Sandeep
quelle
2
@mikkelbreum hast du eine Referenz, um das zu beweisen?
Shea
3
@bungeshea: Das ist CSS3-Syntax. Siehe die Kommentare unter meiner Antwort (sowie meine letzte Bearbeitung). Es ist jedoch etwas ungenau, es als "die" richtige Syntax zu bezeichnen, da für CSS1 / 2-Pseudoelemente sowohl einfache als auch doppelte Doppelpunkte zulässig sind. Ich würde es stattdessen die empfohlene Syntax nennen, da der einzige Grund, die Legacy-Syntax heute weiter zu verwenden, darin besteht, IE8 und älter zu unterstützen.
BoltClock
@mikkelbreum @sheabunge Weitere Informationen zu CSS2 :aftervs CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (Single :hat bessere Unterstützung)
Travis
es funktioniert nicht für Unterstreichung :( jsfiddle.net/porzechowski/u5dhthvq Bitte fügen Sie auch Anzeige hinzu: inline-block; jsfiddle.net/porzechowski/u89fo4oq
plusz
7

So ändern Sie den Text des Menülinks beim Mouseover. (Text in anderer Sprache beim Schweben) Hier ist die

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:"ಕನ್ನಡ";
}
Rao
quelle
1
Dies ist eine schöne Antwort. Tatsächlich hat es mich inspiriert , Ihre Geige leicht zu erweitern, indem ich die Schriftgröße des Span-Textes auf 24 Pixel erhöhte, um sie an den Ersatztext anzupassen, und vor und nach dem Ersatztext 3 nicht unterbrechende Leerzeichen hinzufügte, damit sie die gleiche Breite einnehmen, und gestylt a:hover::beforemit text-decoration: underline, wodurch die Unterstreichung die rote Farbe des Ersatztextes aufnimmt.
Dave Land
4

Versuchen Sie , den Einsatz .card-listing:hover::after hoverund afterVerwendung ::es wil Arbeit

subindas pm
quelle
1

Die Antwort von BoltClock ist richtig. Das einzige, was ich anhängen möchte, ist, dass Sie, wenn Sie nur das Pseudoelement auswählen möchten, eine Spanne eingeben.

Zum Beispiel: 

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

anstatt:

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

Auf diese Weise können Sie einfach sagen

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

Dadurch wird nur das Pseudoelement hervorgehoben, nicht das gesamte li-Element

bbrinx
quelle
-2

Sie können Ihre Aktion auch mit der rechten spitzen Klammer (">") auf nur eine Klasse beschränken, wie ich es in diesem Code getan habe:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    span {
    font-size:12px;
    }
    a {
        color:green;
    }
    .test1>a:hover span {
        display:none;
    }
    .test1>a:hover:before {
        color:red;
        content:"Apple";
    }
  </style>
</head>

<body>
  <div class="test1">
    <a href="#"><span>Google</span></a>
  </div>
  <div class="test2">
    <a href="#"><span>Apple</span></a>
  </div>
</body>

</html>

Hinweis: Der Schalter hover: before funktioniert nur in der Klasse .test1

Stefan Gruenwald
quelle