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').hover(function() { 
    $('.headerUserPreferencesLinks').toggle(); 
});

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

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

Answer 3

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