Jquery mouseenter() vs mouseover()
Entonces, después de leer una pregunta respondida recientemente, no tengo claro si realmente entiendo la diferencia entre mouseenter()y mouseover(). La publicación dice
Ratón sobre():
Se activará al ingresar a un elemento y siempre que se produzca algún movimiento del mouse dentro del elemento.
RatónEntrar():
Se disparará al entrar en un elemento.
Se me ocurrió un violín que usa ambos y parecen bastante similares. ¿Alguien puede explicarme la diferencia entre los dos?
También intenté leer las definiciones de JQuery, ambas dicen lo mismo.
El evento del mouseover se envía a un elemento cuando el puntero del mouse ingresa al elemento
El evento mouseenter se envía a un elemento cuando el puntero del mouse ingresa al elemento.
¿Alguien puede aclararlo con un ejemplo?
Verá el comportamiento cuando su elemento de destino contiene elementos secundarios:
http://jsfiddle.net/ZCWvJ/7/
Cada vez que el mouse ingresa o sale de un elemento secundario, mouseoverse activa, pero no mouseenter.
$('#my_div').bind("mouseover mouseenter", function(e) {
var el = $("#" + e.type);
var n = +el.text();
el.text(++n);
});#my_div {
padding: 0 20px 20px 0;
background-color: #eee;
margin-bottom: 10px;
width: 90px;
overflow: hidden;
}
#my_div>div {
float: left;
margin: 20px 0 0 20px;
height: 25px;
width: 25px;
background-color: #aaa;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>
<div id="my_div">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Aunque funcionan de la misma manera, el mouseenterevento solo se activa cuando el puntero del mouse ingresa al elemento seleccionado . El mouseoverevento se activa si el puntero del mouse ingresa también algún elemento secundario .
Vea el código de ejemplo y la demostración en la parte inferior de la página de documentación de jquery:
http://api.jquery.com/mouseenter/
... mouseover también se activa cuando el puntero se mueve hacia el elemento secundario, mientras que mouseenter se activa solo cuando el puntero se mueve hacia el elemento vinculado.
El evento mouseenter se diferencia del mouseover en la forma en que maneja la propagación de eventos . El evento mouseenter solo activa su controlador cuando el mouse ingresa al elemento al que está vinculado, no a un descendiente . Consulte: https://api.jquery.com/mouseenter/
El evento mouseleave difiere de mouseout en la forma en que maneja la propagación de eventos . El evento mouseleave solo activa su controlador cuando el mouse abandona el elemento al que está vinculado, no un descendiente . Consulte: https://api.jquery.com/mouseleave/
