Puede probar el siguiente ejemplo desde la página de jQuery doc . Es una pequeña demostración interactiva que lo deja muy claro y que puede verlo usted mismo.
var i = 0;
$("div.overout")
.mouseover(function() {
i += 1;
$(this).find("span").text("mouse over x " + i);
})
.mouseout(function() {
$(this).find("span").text("mouse out ");
});
var n = 0;
$("div.enterleave")
.mouseenter(function() {
n += 1;
$(this).find("span").text("mouse enter x " + n);
})
.mouseleave(function() {
$(this).find("span").text("mouse leave");
});
div.out {
width: 40%;
height: 120px;
margin: 0 15px;
background-color: #d6edfc;
float: left;
}
div.in {
width: 60%;
height: 60%;
background-color: #fc0;
margin: 10px auto;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="out overout">
<span>move your mouse</span>
<div class="in">
</div>
</div>
<div class="out enterleave">
<span>move your mouse</span>
<div class="in">
</div>
</div>
En resumen, notará que se produce un evento de mouse sobre un elemento cuando está sobre él, proveniente de su elemento hijo O padre, pero un evento de mouse enter solo ocurre cuando el mouse se mueve desde fuera de este elemento a este elemento.
O como mouseover()
dicen los documentos :
[ .mouseover()
] puede causar muchos dolores de cabeza debido al burbujeo del evento. Por ejemplo, cuando el puntero del mouse se mueve sobre el elemento Interno en este ejemplo, se enviará un evento mouseover a ese, luego se deslizará hacia Outer. Esto puede activar nuestro controlador de mouseover enlazado en momentos inoportunos. Vea la discusión .mouseenter()
para una alternativa útil.
mouseenter
"solo ocurre cuando el mouse se mueve del elemento padre al elemento". El evento ocurre cuando el mouse cambia de estar fuera del elemento a dentro de él. No importa de qué elemento proviene el mouse. Es cierto que el mouse a menudo vendrá del padre, pero no siempre. Por ejemplo, si el padre no tiene relleno o borde, entonces el mouse podría ingresar directamente desde el abuelo, ymouseenter
todavía disparará. De hecho, incluso puede ingresar al elemento desde fuera de la ventana gráfica (si el elemento está justo en el borde) y el evento aún se dispara.