Eventuali vantaggi del passaggio del mouse sul passaggio del mouse in JQuery?

Question

Sono abbastanza nuovo all'API JQuery. Ho usato il mouseover, ma non ho mai usato il passaggio del mouse prima. SO Mi chiedo se invece dovrei usare hover.

Answer 1

Beh, .hover() lega due gestori per la eventi mouseenter e mouseleave, quindi è un modo più conveniente e anche più facile da capire lo scopo.

mouseenter differisce da mouseover quanto mouseenternon è generato se il cursore si trova sopra/entra un elemento figlio dell'elemento conduttore è associato.
Viene attivato una sola volta, quando i cursori entrano nell'elemento. mouseover viene sempre attivato, anche se il cursore si trova su un elemento figlio.

Il modo migliore per vedere la differenza è dare un'occhiata all'esempio di mouseleave().

Inoltre, mouseover e mouseout sono eventi reali JavaScript mentre mouseenter e mouseleave sono eventi forniti da jQuery (afaik).

Alla fine, dipende da ciò che si desidera ottenere. Non c'è giusto o sbagliato e tutti questi metodi hanno il loro scopo. A meno che tu non mostri del codice, non c'è molto altro da dire.

---

Se vuoi dire :hover in CSS e si può ottenere l'effetto desiderato con esso, andare per esso. Se esiste una soluzione non JS per un determinato problema, scegli sempre questa.

Answer 2

hover ti evita semplicemente di dover eseguire sia un mouseenter sia un mouseleave eseguendo entrambi in un'unica funzione.

Answer 3

preferisco usare il css hover, perché sembra che scrivo meno codice per fare lo stesso.

Answer 4

Sono lo stesso, tranne hover gestisce sia MouseEnter e mouseLeave

See: http://api.jquery.com/hover/

in modo da poter usare in questo modo

$('selector').hover(function() { 
    // Do stuff on mouse enter 
    }, function() { 
    // Do other stuff on mouse leave 
    } 
) 

Answer 5

Dal momento che si sta imparando, qui è un altro equivalente all'utilizzo hover:

$('selector').bind('mouseenter mouseleave', function(){ 
if (event.type == "mouseenter") { 
    // MouseEnter code 
} else { 
    // MouseLeave code 
} 
})