jquery - Jquery 悬停显示

Question

我试图有一个简单的按钮，当悬停在它上面时会显示我的 div。我的第一次尝试是这样的：

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

但这里的问题是您必须再次将鼠标悬停在按钮上才能使 div 隐藏。只要您将鼠标悬停在按钮或 div 上，div 就会显示，而当您离开 div 或按钮时，div 将不再显示，我该怎么做。

Answer 1

我更喜欢使用mouseenter和mouseleave

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

希望这个例子会有所帮助..

更多参考http://api.jquery.com/mouseenter/

Answer 2

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

Answer 3

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

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

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