I have a li with id buscaBT , when I click on it, it leaves a div within 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 it when the person moves the mouse outside of that div, it closes.
For this you need to add an event dropper 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();
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();
});
jQuery version: 1.11.0 Fiddle Example: link