Jquery Hover display

Question

I am trying to have a simple button that when hovered over it shows my div. My first attempt was something like this:

$('.headerUserPreferences a').hover(function() {
    $('.headerUserPreferencesLinks').stop().toggle();
}, function() {
    $('.headerUserPreferencesLinks').mouseOut(function() {
        $(this).hide();
    });
});

but the problem here is that you have to hover over the button again to make the div hide. How can I do it where as long as you are hovering over the button or the div the div will show and when you go off the div or the button the div will not display anymore.

Answer 1

$('.headerUserPreferences a').hover(function() { 
    $('.headerUserPreferencesLinks').toggle(); 
});

$('.headerUserPreferencesLinks').mouseout(function() { 
        $(this).hide(); 
}); 

$('.headerUserPreferencesLinks').mouseover(function() { 
        $(this).show(); 
}); 

Answer 2

I would prefer to use mouseenter and mouseleave

$("div.enterleave").mouseenter(function(){
     // code div display
    }).mouseleave(function(){
     // code div hide
    });

hope this example would help..

for more refer http://api.jquery.com/mouseenter/

Answer 3

$('.headerUserPreferences a').mouseover(function() {
    $('.headerUserPreferencesLinks').stop().toggle();
}, function() {
    $('.headerUserPreferencesLinks').mouseout(function() {
        $(this).hide();
    });
});