Estou com o seguinte problema: Criei uma div e dentro dela existe uma segunda div com um texto.
<div class="red">
<div class="blue">OK</div>
</div>
A div-pai recebeu um evento para exibir mensagem quando o mouse passar por cima ou sair dela.
$(document).ready(function(){
$('.red').mouseover(function(){
alert('in');
}).mouseleave(function(){
alert('out');
});
});
Porém a div-filho recebeu um posicionamento absoluto, encadeado ao posicionamento relativo da div-pai, simplificando, a div filho vai se posicionar exatamente acima da div-pai
.red {width:200px;height:200px;background:red;position:relative}
.blue {width:100px;
height:100px;
background:blue;
color:white;
position:absolute;
z-index:1;
}
https://jsfiddle.net/20gv6auu/4/
O problema é, se eu passar o mouse ou tirar de cima da uma das divs, o evento será executado normalmente, mas quando eu passo da div-pai, para a div-filho e vice-versa, os eventos são disparados.
Eu preciso que o Jquery agrupe a div-pai e a div-filho mesmo estando em posicionamento absoluto, com se ambas fossem um unico elemento.
(obs.:É crucial manter o posicionamento absoluto)