Gibt es eine Möglichkeit, das Gegenteil von der :hover
Verwendung von nur CSS zu tun ? Wie in: Wenn :hover
ja on Mouse Enter
, gibt es ein CSS-Äquivalent zu on Mouse Leave
?
Beispiel:
Ich habe ein HTML-Menü mit Listenelementen. Wenn ich mit der Maus über eines der Elemente schwebe, wird eine CSS-Farbanimation von #999
bis angezeigt black
. Wie kann ich den gegenteiligen Effekt erzielen, wenn die Maus den Elementbereich mit einer Animation von black
bis verlässt #999
?
(Denken Sie daran, dass ich nicht nur dieses Beispiel beantworten möchte, sondern das gesamte "Gegenteil von :hover
".)
:hover
ist ganz einfach:not(:hover)
; jedoch:hover
ist nicht gleichbedeutend mitonmouseenter
noch ist:not(:hover)
das gleiche wieonmouseleave
. CSS hat kein Konzept für DOM-Ereignisse.:hover
bedeutet einfach "ein Element, über dem sich ein Mauszeiger befindet". Es wird nicht angezeigt, ob der Mauszeiger von einem anderen Element zu diesem Element übergegangen ist. Es bedeutet nur, dass sich der Mauszeiger derzeit auf dem Element befindet.:not(:hover)
gilt dies. Hier ist eine Demo: jsfiddle.net/BoltClock/rghBXAntworten:
Wenn ich das richtig verstehe, können Sie dasselbe tun, indem Sie Ihre Übergänge auf den Link anstatt auf den Schwebezustand verschieben:
http://jsfiddle.net/spacebeers/sELKu/3/
Die Definition von Schwebeflug ist:
Nach dieser Definition ist das Gegenteil von Schweben jeder Punkt, an dem sich die Maus nicht darüber befindet. Jemand, der viel schlauer als ich ist, hat diesen Artikel verfasst und in beiden Zuständen unterschiedliche Übergänge festgelegt - http://css-tricks.com/different-transitions-for-hover-on-hover-off/
quelle
:hover
Ihnen zitierte 'Definition' stammt von W3Schools, die in keiner Weise eine maßgebliche Quelle sind. Die aktuelle Spezifikation finden Sie unter w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes , obwohl dies nicht die am leichtesten zugängliche Erklärung ist.Verwenden Sie einfach CSS-Übergänge anstelle von Animationen.
Live-Demo
quelle
:hover
.Nein, es gibt keine explizite Eigenschaft für Mausurlaub in CSS.
Sie können Folgendes verwenden: Bewegen Sie den Mauszeiger über alle anderen Elemente mit Ausnahme des betreffenden Elements, um diesen Effekt zu erzielen. Aber ich bin mir nicht sicher, wie praktisch das wäre.
Ich denke, Sie müssen sich eine JS / jQuery-Lösung ansehen.
quelle
Sie können den CSS3-Übergang verwenden
Einige gute Links:
http://css-tricks.com/different-transitions-for-hover-on-hover-off/
http://www.alistapart.com/articles/understanding-css3-transitions/
quelle
Obwohl die Antworten hier ausreichend sind, denke ich wirklich, dass das Beispiel von W3Schools zu diesem Thema sehr einfach ist (es hat die Verwirrung (für mich) sofort beseitigt).
Zusammenfassend lässt sich sagen, dass für Übergänge, bei denen die Animationen "Enter" und "Exit" identisch sein sollen, Übergänge auf dem Haupt-Selektor
.button
und nicht auf dem Hover-Selektor verwendet werden müssen.button:hover
. Für Übergänge, bei denen die Animationen "Enter" und "Exit" unterschiedlich sein sollen, müssen Sie unterschiedliche Übergänge für Haupt- und Hover-Selektor angeben.quelle
Geben Sie Ihre Dauer in die Auswahl ohne Schwebeflug ein:
quelle
Fügen Sie einfach einen Übergang zu dem Element hinzu, mit dem Sie sich anlegen. Beachten Sie, dass beim Laden der Seite einige Auswirkungen auftreten können. Wenn Sie beispielsweise einen Randradius geändert haben, wird dieser beim Laden des Doms angezeigt.
quelle
Du hast falsch verstanden
:hover
; Es heißt, die Maus befindet sich über einem Objekt, anstatt dass die Maus gerade das Objekt eingegeben hat.Sie können dem Selektor eine Animation hinzufügen, ohne
:hover
den gewünschten Effekt zu erzielen.Übergänge sind eine bessere Option: http://jsfiddle.net/Cvx96/
quelle
Das Gegenteil von
:hover
scheint zu sein:link
.(Bearbeiten: technisch kein Gegenteil, da es 4 Selektoren
:link
gibt:visited
,:hover
und:active
. Fünf, wenn Sie einschließen:focus
.)Wenn Sie beispielsweise eine Regel definieren
.button:hover{ text-decoration:none }
, um die Unterstreichung einer Schaltfläche zu entfernen, wird die Unterstreichung angezeigt, wenn Sie die Schaltfläche in einigen Browsern deaktivieren. Ich habe das mit behoben.button:hover, .button:link{ text-decoration:none }
Dies funktioniert natürlich nur für Elemente, die tatsächlich Links sind (mit href-Attribut).
quelle
:link
wählt einfach Links aus, so einfach ist das. Schauen Sie hier die Definition von:link
: developer.mozilla.org/en-US/docs/Web/CSS/%3AlinkFügen Sie einfach einen Übergang und den Namen der Animation in der Klasse inicial hinzu, in Ihrem Fall ul li a, fügen Sie einfach eine "Übergang" -Eigenschaft hinzu und das ist alles, was Sie brauchen
quelle