it-swarm.com.de

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

Gibt es eine Möglichkeit, das Gegenteil von :hover nur mit CSS zu erreichen? Wie in: Wenn :hoveron Mouse Enter Ist, 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 fahre, wird eine CSS-Farbanimation von #999 Bis black angezeigt. Wie kann ich den gegenteiligen Effekt erzeugen, wenn die Maus den Objektbereich mit einer Animation von black bis #999 Verlässt?

jsFiddle

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

97
Cthulhu

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 Schwebeflug-Selektor wird verwendet, um Elemente auszuwählen, wenn Sie mit der Maus über sie fahren.

Nach dieser Definition ist das Gegenteil von Hover jeder Punkt, an dem sich die Maus nicht darüber befindet. Jemand, der viel schlauer als ich ist, hat diesen Artikel geschrieben und für beide Zustände 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;
}
80
SpaceBeers

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

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

A:hover {
    color: #000;
}

Live-Demo

17
Marat Tanalin

Nein, in CSS gibt es keine explizite Eigenschaft für mouse leave.

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.

5
Moin Zaman
2
SVS

Obwohl die Antworten hier ausreichen, denke ich wirklich, dass W3Schools ein Beispiel zu diesem Thema sehr einfach ist (es hat die Verwirrung (für mich) sofort beseitigt).

Verwenden Sie die :hover Auswahl, um den Stil einer Schaltfläche zu ändern, wenn Sie mit der Maus darüber fahren.

Tipp: Verwenden Sie die Übergangsdauer-Eigenschaft, 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 müssen Sie für Übergänge, bei denen die Animationen "enter" und "exit" identisch sein sollen, Übergänge auf der Hauptauswahl .button anstelle des Schwebeflugwählers .button:hover. Für Übergänge, bei denen die Animationen "Eingeben" und "Verlassen" unterschiedlich sein sollen, müssen Sie unterschiedliche Übergänge für die Hauptauswahl und die Schwebeauswahl angeben.

0
Govind Rai

Sie haben :hover Falsch verstanden; Es heißt, dass sich die Maus über einem Element befindet und nicht, dass die Maus das Element gerade eingegeben hat.

Sie können dem Selektor eine Animation ohne :hover Hinzufügen, um den gewünschten Effekt zu erzielen.

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

0

Tragen Sie Ihre Dauer in die Non-Hover-Auswahl ein:

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

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

Das Gegenteil von :hover Scheint :link Zu sein.

(edit: technisch kein Gegensatz, da es 4 Selektoren gibt :link, :visited, :hover und :active. Fünf, wenn Sie :focus einschließen. .)

Wenn Sie beispielsweise eine Regel .button:hover{ text-decoration:none } Definieren, um die Unterstreichung auf einer Schaltfläche zu entfernen, wird die Unterstreichung angezeigt, wenn Sie die Schaltfläche in einigen Browsern deaktivieren. Ich habe dies mit .button:hover, .button:link{ text-decoration:none } Behoben.

Dies funktioniert natürlich nur für Elemente, die tatsächlich Verknüpfungen sind (mit dem Attribut href).

0
scripter