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