2

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)

1
  • Qual é o browser que estás a testar? Acho que no Chrome faz como queres.
    – Sergio
    Commented 8/11/2015 às 23:08

1 Resposta 1

2

Você precisa usar mouseenter em vez de mouseover:

$(document).ready(function(){
    $('.red').mouseenter(function(){
        alert('in');                                      
    }).mouseleave(function(){
        alert('out');
    });
});

O mouseenter faz par com mouseleave (e se comporta como você quer), enquanto o mouseover faz par com o mouseout.

https://jsfiddle.net/20gv6auu/9/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .