Was ist das Gegenteil von: Hover (bei Maus verlassen)?

Question

Gibt es eine Möglichkeit, das Gegenteil von :hovermit nur CSS zu tun? Wie in: Wenn :hoveron Mouse Enter ist, gibt es eine CSS-Entsprechung zu on Mouse Leave?

Beispiel:

Ich habe ein HTML-Menü Listenelemente. Wenn ich eines der Elemente schwebe, gibt es eine CSS-Farbanimation von #999 bis black. Wie kann ich den gegenteiligen Effekt erzeugen, wenn die Maus den Objektbereich verlässt, mit einer Animation von black bis #999?

jsFiddle

(Haben Sie daran, dass ich mag nicht nur dieses Beispiel beantworten, sondern das gesamte „Gegenteil von :hover“ -Ausgabe.)

Answer 1

Wenn ich das richtig verstanden, könnten Sie das gleiche tun, indem Sie Ihre Übergänge auf den Link, anstatt den Schwebezustand zu bewegen:

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 Hover lautet:

Der: Hover Selector wird verwendet, um Elemente auszuwählen, wenn Sie die Maus über bewegen.

Durch diese Definition das Gegenteil von schwebe ist jeder Punkt, an dem die Maus ist nicht darüber.Jemand weit klüger als ich diesen Artikel gemacht hat, verschiedene Übergänge auf beiden Zustände einstellen - 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; 
} 

Answer 2

Nein gibt es keine explizite Eigenschaft für Maus Urlaub in CSS .

Sie könnten verwenden: Hover auf alle anderen Elemente außer dem fraglichen Element, um diesen Effekt zu erzielen. Aber ich bin nicht sicher, wie praktisch das wäre.

Ich denke, Sie müssen eine JS/jQuery-Lösung betrachten.

Answer 3

Verwenden Sie einfach CSS transitions anstelle von Animationen.

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

A:hover { 
    color: #000; 
} 

Live demo

Answer 4

Sie haben :hover falsch verstanden; Es sagt, dass die Maus über einem Gegenstand ist, anstatt dass die Maus gerade den Gegenstand betreten hat.

Sie könnten dem Selektor Animationen hinzufügen, ohne :hover, um den gewünschten Effekt zu erzielen.

Transitions ist eine bessere Option: http://jsfiddle.net/Cvx96/

Answer 5

Sie CSS3 Übergang

Einige gute Verbindungen verwenden können:

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

Answer 6

Das Gegenteil von :hover scheint :link zu sein.

(edit: technisch nicht eine entgegengesetzte, weil es vier Selektoren :link, :visited, :hover und :active Fünf wenn Sie :focus umfassen..)

Zum Beispiel, wenn .button:hover{ text-decoration:none } eine Regel definieren, die unterstrichenen auf eine Schaltfläche zu entfernen, Die Unterstreichung wird angezeigt, wenn Sie in einigen Browsern den Knopf loslassen. Ich habe dieses Problem behoben mit .button:hover, .button:link{ text-decoration:none }

nur Dies ist natürlich für Elemente arbeitet, die tatsächlich Links sind (haben href Attribut)

Answer 7

Obwohl hier Antworten ausreichend sind, glaube ich wirklich W3Schools Beispiel zu diesem Thema ist sehr einfach (es räumte die Verwirrung (für mich) sofort auf).

Verwenden Sie den :hover Wähler den Stil einer Taste zu ändern, wenn Sie die Maus über sie bewegen.

Tipp: Verwenden Sie die Übergangsdauer Eigenschaft, um die Geschwindigkeit von den "Hover-Effekt" zu bestimmen:

Beispiel

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

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

Zusammengefasst für Übergänge, wo Sie das wollen " "Enter" und "Exit" -Animationen sind identisch, Sie müssen die Übergänge auf dem Hauptselektor .button anstelle des Hover-Selektors .button:hover verwenden. Bei Übergängen, bei denen die Animationen "Enter" und "Exit" unterschiedlich sein sollen, müssen Sie verschiedene Übergänge zwischen Main Selector und Hover Selector angeben.