MouseOver e MouseOut nei CSS

Question

Per utilizzare il mouse in un elemento, utilizzare l'attributo CSS :hover. Che ne dici del mouse fuori dall'elemento?

Ho aggiunto un effetto di transizione sull'elemento per modificare il colore. L'effetto hover funziona bene, ma quale attributo CSS dovrei usare per il mouse per applicare l'effetto? Sto cercando una soluzione CSS, non una soluzione JavaScript o JQuery.

Answer 1

Ecco la soluzione migliore, penso.

CSS onomouseout:

div:not(:hover){ ... } 

CSS onmouseover:

div:hover{ ... } 

E 'meglio, perché se è necessario impostare alcuni stili SOLO onmouseout e cercando di farlo in questo modo

div { ... } 

imposterai anche i tuoi stili e anche per onmouseover.

Answer 2

Hai solo bisogno del :hover, quando il mouse fuori del elemento, tornerete ad esso è non di default: hover Stato, in questo modo:

.class { color: black; } 
.class:hover { color: red; } 

quando si passa, il colore sarà rosso e quando si "toglie il mouse", il colore tornerà nero perché non corrisponde più al selettore :hover. Questo è il comportamento predefinito per tutti i browser, niente di speciale che devi fare qui.

Answer 3

CSS in sé non supporta un selettore mousein o mouseout.

Il selettore :hover si applica all'elemento mentre il mouse è sopra di esso, aggiungendo lo stile quando il mouse entra e rimuove lo stile quando il mouse lascia.

L'approccio più vicino è definire gli stili da inserire in mouseout all'interno degli stili predefiniti (non al passaggio del mouse). Quando si passa il mouse sopra l'elemento, gli stili all'interno di hover avranno effetto, emulando un mousein e quando si sposterà il mouse dall'elemento, gli stili predefiniti avranno di nuovo effetto, emulando mouseout.

Ecco una example, tratto da here:

div { 
    background: #2e9ec7; 
    color: #fff; 
    margin: 0 auto; 
    padding: 100px 0; 
    -webkit-transition: -webkit-border-radius 0.5s ease-in; 
    -moz-transition: -moz-border-radius 0.5s ease-in; 
    -o-transition: border-radius 0.5s ease-in; 
    -ms-transition: border-radius 0.5s ease-in; 
    transition: border-radius 0.5s ease-in; 
    text-align: center; 
    width: 200px; 
} 


div:hover { 
    background: #2fa832; 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
    -webkit-transform: rotate(720deg); 
    -moz-transform: rotate(720deg); 
    -o-transform: rotate(720deg); 
    -ms-transform: rotate(720deg); 
    transform: rotate(720deg); 
} 

I transition s definite per lo stile div:hover avranno effetto quando il mouse entra (e hover è applicato). I transition s per lo stile div avranno effetto quando il mouse lascia (e hover viene rimosso). Ciò comporta che le transizioni mousein e mouseout siano diverse.

Answer 4

Penso di aver trovato la soluzione.

.class :hover { 
    /*add your animation of mouse enter*/ 
} 

.class { 
    /* 
    no need for not(hover) or something else. 
    Just write your animation here and it will work when mouse out 
    */ 
} 

Provare per credere ... :)