Was ist das Gegenteil von: Schweben (beim Verlassen der Maus)?

115

Gibt es eine Möglichkeit, das Gegenteil von der :hover Verwendung von nur CSS zu tun ? Wie in: Wenn :hoverja 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 #999bis angezeigt black. Wie kann ich den gegenteiligen Effekt erzielen, wenn die Maus den Elementbereich mit einer Animation von blackbis verlässt #999?

jsFiddle

(Denken Sie daran, dass ich nicht nur dieses Beispiel beantworten möchte, sondern das gesamte "Gegenteil von :hover".)

Cthulhu
quelle
Was genau versuchst du zu tun? Vielleicht gibt es eine andere Alternative?
Moin Zaman
14
Das Gegenteil von :hoverist ganz einfach :not(:hover); jedoch :hoverist nicht gleichbedeutend mit onmouseenternoch ist :not(:hover)das gleiche wie onmouseleave. CSS hat kein Konzept für DOM-Ereignisse.
BoltClock
1
@Cthulhu: :hoverbedeutet 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.
BoltClock
1
@BoltClock würde: nicht (: hover) überhaupt etwas auslösen?
Moin Zaman
5
@Moin Zaman: Ja. Solange sich Ihre Maus nicht über einem bestimmten Element befindet, :not(:hover)gilt dies. Hier ist eine Demo: jsfiddle.net/BoltClock/rghBX
BoltClock

Antworten:

92

Wenn ich das richtig verstehe, können Sie dasselbe tun, indem Sie Ihre Übergänge auf den Link anstatt auf den Schwebezustand verschieben:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

Die Definition von Schwebeflug ist:

Der: hover-Selektor wird verwendet, um Elemente auszuwählen, wenn Sie mit der Maus darüber fahren.

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/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}
SpaceBeers
quelle
1
"(Denken Sie daran, dass ich nicht nur dieses Beispiel beantworten möchte, sondern das gesamte" Gegenteil von: Schwebeflug ".)"
Cthulhu
1
@Cthulhu - Ich habe meine Antwort jetzt bearbeitet. Das könnte ein bisschen mehr helfen. Ich fand das eine zu offensichtliche Antwort.
SpaceBeers
+1 für mich in die richtige Richtung. Ich hatte eine Animationsdiskrepanz zwischen Browsern. Chrome machte alles flüssiger, aber ich hatte eine .1s, die sich in Übergängen unterschied, und Mozilla und IE zeigten beide den Fehler an. Ich konnte das Problem beheben, indem ich meine Übergangsnummern abgeglichen habe.
Termato
Pfui. Die von :hoverIhnen 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.
Mark Amery
22

Verwenden Sie einfach CSS-Übergänge anstelle von Animationen.

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

Live-Demo

Marat Tanalin
quelle
Wie ich im Beispiel sagte, liegt mein Problem nicht bei der Animation, sondern beim Teil "On Mouse Leave".
Cthulhu
5
Der Übergang funktioniert sowohl mit der Maus als auch mit der Maus. Es reicht aus, Stile für den Normalzustand und den Normalzustand anzugeben :hover.
Marat Tanalin
5

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.

Moin Zaman
quelle
JS wird in diesem Fall nicht benötigt, und ich würde jetzt davon abraten, obwohl dies eine Rechtfertigung für die Leistung darstellt.
Alex Chamberlain
Für das obige Beispiel wird es nicht benötigt, aber es scheint die beste Lösung für das gesamte Problem "Maus verlassen" zu sein.
Cthulhu
1

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).

Verwenden Sie den :hoverSelektor, um den Stil einer Schaltfläche zu ändern, wenn Sie die Maus darüber bewegen.

Tipp: Verwenden Sie die Eigenschaft für die Übergangsdauer, um die Geschwindigkeit des "Hover" -Effekts zu bestimmen:

Beispiel

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

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 .buttonund 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.

Govind Rai
quelle
1

Geben Sie Ihre Dauer in die Auswahl ohne Schwebeflug ein:

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}
Hassan Mahmoud
quelle
1

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.

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

José Rasmussen
quelle
0

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 :hoverden gewünschten Effekt zu erzielen.

Übergänge sind eine bessere Option: http://jsfiddle.net/Cvx96/

Alex Chamberlain
quelle
1
Ihre Geige liefert nicht das beabsichtigte Ergebnis.
Govind Rai
0

Das Gegenteil von :hoverscheint zu sein :link.

(Bearbeiten: technisch kein Gegenteil, da es 4 Selektoren :linkgibt :visited, :hoverund :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).

Scripter
quelle
Ihre Angaben sind falsch. :linkwählt einfach Links aus, so einfach ist das. Schauen Sie hier die Definition von :link: developer.mozilla.org/en-US/docs/Web/CSS/%3Alink
Cthulhu
@ Strive55 Ahhh, danke, das macht Sinn. In dem von Ihnen angegebenen Link heißt es: "Um Links angemessen zu gestalten, müssen Sie die: link-Regel vor die anderen stellen, wie in der LVHA-Reihenfolge :: link -: visit -: hover -: active definiert." Wenn ich es richtig verstehe, bedeutet dies, dass wenn keiner der anderen Selektoren zutrifft (: besucht ,: schweben oder: aktiv), dann gilt: Link. Technisch gesehen kein Gegenteil, denn es gibt 4, aber es funktioniert immer noch
Scripter
0

Fü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

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>

Stock Dave
quelle