Qual è l'opposto di: hover (in mouse leave)?

Question

C'è un modo per fare l'opposto di :hoverutilizzando solo CSS? Come in: se :hover è on Mouse Enter, esiste un valore CSS equivalente a on Mouse Leave?

Esempio:

Ho un menù HTML utilizzando gli elementi della lista. Quando passo il mouse su uno degli elementi, c'è un'animazione di colore CSS da #999 a black. Come posso creare l'effetto opposto quando il mouse lascia l'area dell'oggetto, con un'animazione da black a #999?

jsFiddle

(avete in mente che io non voglio rispondere solo questo esempio, ma l'intero "opposto di :hover" questione.)

Answer 1

Se ho capito bene si potrebbe fare la stessa cosa muovendo le transizioni al link, piuttosto che lo stato hover:

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/

La definizione di hover è:

: il selettore al passaggio del mouse viene utilizzato per selezionare gli elementi quando si sposta il mouse su .

Con tale definizione l'opposto di librazione è un qualsiasi punto in cui il mouse non sopra.Qualcuno molto più intelligente di me ha fatto questo articolo, impostando diverse transizioni su entrambi gli stati - 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

No, non c'è alcuna proprietà esplicita per ferie del mouse in CSS .

È possibile utilizzare: al passaggio del mouse su tutti gli altri elementi tranne l'elemento in questione per ottenere questo effetto. Ma non sono sicuro di quanto sarebbe pratico.

Penso che si debba guardare una soluzione JS/jQuery.

Answer 3

Basta usare CSS transitions invece di animazioni.

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

A:hover { 
    color: #000; 
} 

Live demo

Answer 4

Hai capito male :hover; dice che il mouse è sopra un oggetto, piuttosto che il mouse ha appena inserito l'oggetto.

È possibile aggiungere animazione al selettore senza :hover per ottenere l'effetto desiderato.

Transitions è una scelta migliore: http://jsfiddle.net/Cvx96/

Answer 5

È possibile utilizzare CSS3 transizione

Alcuni buoni link:

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

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

Answer 6

L'opposto di :hover sembra essere :link.

(edit: non è tecnicamente un opposto, perché ci sono 4 selettori :link, :visited, :hover e :active Cinque se si include :focus..)

Per esempio quando si definisce una regola .button:hover{ text-decoration:none } per rimuovere la sottolineatura su un pulsante, la sottolineatura compare quando si rilascia il pulsante in alcuni browser. Ho fissato questo con .button:hover, .button:link{ text-decoration:none }

Questo ovviamente funziona solo per gli elementi che sono in realtà i collegamenti (hanno attributo href)

Answer 7

Anche se le risposte qui sono sufficienti, penso davvero W3Schools esempio su questo tema è molto semplice (si chiarito la confusione (per me) subito).

utilizzare il selettore :hover per modificare lo stile di un pulsante quando si sposta il mouse su di esso.

Suggerimento: Utilizzare la proprietà transizione durata per determinare la velocità del del "hover" effetto:

Esempio

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

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

In sintesi, per le transizioni in cui si desidera che il " inserire le animazioni "e" esci "per essere uguali, è necessario utilizzare le transizioni sul selettore principale .button anziché sul selettore al passaggio del mouse .button:hover. Per le transizioni in cui si desidera che le animazioni "enter" e "exit" siano diverse, è necessario specificare diverse selezioni del selettore principale e del selettore al passaggio del mouse.