Make div close by clicking outside of it

Asked

Viewed 7,467 times

2

I have a li with the id buscaBT, when I click on it, it leaves a div inside that li (formularioBusca) as display:block, so far, quiet, everything working. I did so:

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

My question is: I want when the person hovers the mouse off that div, it closes.

jquery

2 answers

4


For this you need to add an event headset to the mouseleave associated with that class. Example:

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

You can then hide directly with 

this.style.display = 'none';

or make an animation to close with

$(this).slideUp();

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

  • 1

    worked 100%. : D

  • This will cause the mouse to pass outside the div, the same closes, has to close when clicking?

  • @Sostheblack in this case you only need this: http://jsfiddle.net/8tL9y/6/ (if you are not sure, ask a new question pf)

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();
});

Version jQuery: 1.11.0 Fiddle Example: http://jsfiddle.net/4acZR/

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.