¿Cuándo elegir la función mouseover () y hover ()?

112

¿Cuáles son las diferencias entre jQuery .mouseover()y .hover()funciones? Si son totalmente iguales, ¿por qué jQuery usa ambos?

jquery mouseevent Bhojendra Rauniyar
fuente
4
Esta no es una pregunta duplicada. el enlace proporcionado tiene eventos de mouseover y mouseenter, pero el mío son eventos de mouseover y hover.
Bhojendra Rauniyar
1
son diferentes al igual que mouseover nad mouseleave y la respuesta aceptada a continuación no es precisa ... la función de desplazamiento agrega eventos mouseenter y mouseleve, no eventos mouseover y mouseout
Arun P Johny
1
ver jsfiddle.net/arunpjohny/cZb5b/1 mover el mouse del elelemento childy verificar la consola
Arun P Johny
@ArunPJohny por favor vuelva a leer, eso es decir mouseenter y mouseleave no mouseover y mouseout.
Bhojendra Rauniyar
1
también con hover - jsfiddle.net/arunpjohny/cZb5b/2 si puedes analizar la consola, puedes encontrar la diferencia ...
Arun P Johny

Respuestas:

113

De la documentación oficial de jQuery

  • .mouseover()
    Vincula un controlador de eventos al evento de JavaScript "mouseover" o activa ese evento en un elemento.

  • .hover() Vincula uno o dos controladores a los elementos coincidentes, para que se ejecuten cuando el puntero del mouse entre y salga de los elementos.

    Llamar $(selector).hover(handlerIn, handlerOut)es una abreviatura de: $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

  • .mouseenter()

    Vincula un controlador de eventos para que se active cuando el mouse ingresa a un elemento, o activa ese controlador en un elemento.

    mouseoverSe activa cuando el puntero se mueve también hacia el elemento secundario, mientras mouseenterque solo se activa cuando el puntero se mueve hacia el elemento vinculado.

Lo que esto significa

Por esto, no.mouseover() es lo mismo que .hover(), por la misma razón no.mouseover() es lo mismo que .mouseenter().

$('selector').mouseover(over_function) // may fire multiple times

// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function)
Navin Rauniyar
fuente
31

.hover()La función acepta dos argumentos de función, uno para mouseenterevento y otro para mouseleaveevento.

mishik
fuente
este es un gran punto en términos de las diferencias entre las dos funciones mencionadas en el título de la pregunta, ¡Gracias! Consulte el enlace a continuación en w3schools para saber cómo funciona .hover (): w3schools.com/jquery/event_hover.asp
Bahman.A
8

Puede probarlo http://api.jquery.com/mouseover/ en la página de documentación de jQuery. Es una pequeña demostración interactiva que lo deja muy claro y que realmente puedes verlo por ti mismo.

En resumen, notará que se produce un evento de mouse sobre un elemento cuando está sobre él, proveniente de su elemento secundario O primario, pero un evento de entrada del mouse solo ocurre cuando el mouse se mueve del elemento principal al elemento.

Shivaji Ranaware
fuente
1

De los documentos oficiales: ( http://api.jquery.com/hover/ )

El método .hover () vincula controladores para eventos mouseenter y mouseleave. Puede usarlo para simplemente aplicar el comportamiento a un elemento durante el tiempo que el mouse está dentro del elemento.

Wottensprels
fuente
1

Como puede leer en http://api.jquery.com/mouseenter/

El evento de JavaScript mouseenter es propiedad de Internet Explorer. Debido a la utilidad general del evento, jQuery simula este evento para que pueda usarse independientemente del navegador. Este evento se envía a un elemento cuando el puntero del mouse ingresa al elemento. Cualquier elemento HTML puede recibir este evento.

Edorka
fuente