Você pode experimentar o seguinte exemplo na página de documentos do jQuery . É uma demonstração agradável e interativa que torna muito claro e você pode realmente ver por si mesmo.
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>
Em resumo, você notará que um evento de mouse over ocorre em um elemento quando você está sobre ele - proveniente do elemento filho OU pai, mas um evento de entrada do mouse ocorre apenas quando o mouse se move de fora desse elemento para esse elemento.
Ou, como mouseover()
dizem os documentos :
[ .mouseover()
] pode causar muitas dores de cabeça devido a bolhas de eventos. Por exemplo, quando o ponteiro do mouse se move sobre o elemento Inner neste exemplo, um evento de mouseover será enviado para ele e, em seguida, subirá para Outer. Isso pode acionar nosso manipulador de mouseover vinculado em momentos inoportunos. Veja a discussão .mouseenter()
para uma alternativa útil.
mouseenter
"só ocorre quando o mouse se move do elemento pai para o elemento". O evento ocorre quando o mouse passa de fora do elemento para dentro dele. Não importa de qual elemento o mouse veio. É verdade que o mouse geralmente vem dos pais, mas nem sempre. Por exemplo, se o pai não tiver preenchimento ou borda, o mouse poderá entrar direto do avô emouseenter
ainda disparará. De fato, ele pode até inserir o elemento de fora da janela de visualização (se o elemento estiver no limite) e o evento ainda é acionado.