2

Eu tenho uma li com o id buscaBT, quando eu clico nela, ela deixa uma div dentro dessa li (formularioBusca) como display:block, até aí, tranquilo, tudo funcionando. Fiz assim:

$( "#buscaBT" ).click(function() {
    $( '.formularioBusca' ).css('display','block');
});

Minha dúvida é: eu quero que quando a pessoa passe o mouse fora dessa div, ela feche.

1

2 Respostas 2

4

Para isso precisa adicionar um oscultador de evento para o mouseleave associado a essa classe. Exemplo:

$('.formularioBusca').on('mouseleave', function(){
    // correr código aqui
});

Pode depois esconder diretamente com

this.style.display = 'none'; 

ou fazer uma animação para fechar com

$(this).slideUp();

Exemplo: http://jsfiddle.net/8tL9y/

3
  • 1
    funcionou 100%. :D 11/07/2014 às 12:37
  • Isso vai fazer com que ao passar o mouse fora da div, a mesma fecha, tem como fazer ela fechar ao clicar? 13/03/2015 às 12:37
  • @SOSTheBlack nesse caso precisas só disto: jsfiddle.net/8tL9y/6 (se não tiver acertado faz uma nova pergunta pf)
    – Sergio
    13/03/2015 às 12:42
2

HTML:

<li>
    <a href="#">Click</a>
    <div>teste</div>
</li>

CSS:

li div{
    display:none;
}

JS:

$('li a').click(function(){
    $('li div').toggle();
});
$('li div').mouseleave(function(){
        $('li div').toggle();
});

Versão jQuery: 1.11.0 Exemplo Fiddle: http://jsfiddle.net/4acZR/

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 .