Problem with mouseout function when showing and hiding a div

Question

I have a navigation item which, when clicked, shows a hidden div. I'm having trouble getting the div to hide when you mouseout of the div. I would like it to hide when the user's mouse leaves the bounds of the div. Here is the jquery:

$(document).ready(function () {
    $('li#locations a').click( 
        function(){ 
            $('#locationsSuperNav').slideDown(); 
        }
    ); 
    $('#locationsSuperNav').mouseout( 
        function(){ 
            $('#locationsSuperNav').slideUp(); 
        }
    );
}); 

There are links and images inside the #locationsSuperNav div. When the cursor hovers over those elements, the div will hide. Is there any way to prevent this??

Thanks in advance for any help.

Answer 1

Sure, use the mouseleave event handler rather than mouseout.

$('#locationsSuperNav').mouseleave( 
    function(){ 
        $('#locationsSuperNav').slideUp(); 
    }
);

Answer 2

Try to use mouseleave instead of mouseout, I didn't checked, but it may work...

$(document).ready(function () {
$('li#locations a').click( 
    function(){ 
        $('#locationsSuperNav').slideDown(); 
    }
); 
$('#locationsSuperNav').mouseleave( 
    function(){ 
        $('#locationsSuperNav').slideUp(); 
    }
);});

Answer 3

Instead of .mouseout() use .mouseleave() here, like this:

$('#locationsSuperNav').mouseleave(function(){ 
  $(this).slideUp(); 
});

Unlike mouseout which fires even when entering children, mouseleave won't. From the docs:

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

You can also use this inside a handler to refer to the element in question, no need to run the selector again, like I have above.

Answer 4

The problem you are having is that the mouseout event is fired whenever the cursor leaves the targeted element -- including when it moves inside of a child element. jQuery can help you handle this by using the .hover() function instead: http://api.jquery.com/hover/

This will allow you to bind an event to whenever the mouse come into your element or it's child elements, and when it leaves the encompassing area of your element, with children being included as part of that area. So you might do something like this:

$(function () {
    $('li#locations a').click( 
        function(){ 
            $('#locationsSuperNav').slideDown(); 
        }
    ); 
    $('#locationsSuperNav').hover(function() {},  
        function(){ 
            $('#locationsSuperNav').slideUp(); 
        }
    );
}); 

This will do nothing when you hover into the #locationsSuperNav element, and perform your slideUp() when you hover out of it.

Should you desire to, you can also fill in some functionality for the hover in event.