1 
<div id="mNavigator" style="position:absolute;top:0px;right:30px;color:#888;font-family:helvetica;font-weight:400,font-size:11px;letter-spacing:0;opacity:0.6;cursor:pointer;padding:18px;z-index:9999;background:red;">
You are browsing <span style="color:#fff">MYNAME</span>
</div>

<div id="dropDown" style="display:none;padding:8px;background:#1b1b1b;position:absolute;top:40px;right:40px;z-index:9999;">
<div style="width:319px;padding:8px 10px 8px 10px;background:#000;font-size:9px;font-family:helvetica,arial;color:#666;">MY HEADER</div>
</div>

$('#mNavigator').mouseover(function(){
    $(this).css('opacity','1');
    $('#dropDown').show('fast', function() {
     // Animation complete.
    });
}).mouseout(function(){
    $(this).css('opacity','0.6');
    $('#dropDown').hide('fast', function() {
     // Animation complete.
    });
});

私は基本的な溺死メニューを作成しました、そして私は専門家が助けてくれることを望んでいた2つの質問がありました

1）実際のメニュー項目（MY HEADERと表示されている部分）にマウスを合わせようとしたときに、メニューが閉じないようにするにはどうすればよいですか？2）赤い領域でマウスを動かすと、メニューがすばやく循環し続け、結果として貧弱なユーザーエクスペリエンス、これを回避する方法はありますか？

簡単にするために、私の例をjsfiddleに含めました：http： //jsfiddle.net/ECreX/1/

4

3 に答える 3

2

サブメニューをメインメニューdivの子として配置し、.mouseover（）と.mouseout（）の代わりに.mousenter（）と.mouseleave（）を使用すると、問題が修正されます。または、.mouseenter（）および.mouseleave（）のショートカットである.hover（）を使用することもできます。また、サブメニューdivをネストすることにより、マウスがサブメニュー上にあるときにメインメニューがアクティブのままになることにも注意してください。

jsFiddleの例

HTML

<div id="mNavigator" style="position:absolute;top:0px;right:30px;color:#888;font-family:helvetica;font-weight:400,font-size:11px;letter-spacing:0;opacity:0.6;cursor:pointer;padding:18px;z-index:9999;background:red;">You are browsing <span style="color:#fff">MYNAME</span>
    <div id="dropDown"
    style="display:none;padding:8px;background:#1b1b1b;position:absolute;top:40px;right:40px;z-index:9999;">
        <div style="width:319px;padding:8px 10px 8px 10px;background:#000;font-size:9px;font-family:helvetica,arial;color:#666;">MY HEADER</div>
    </div>
</div>

jQuery

$('#mNavigator').mouseenter(function () {
    $(this).css('opacity', '1');
    $('#dropDown').show('fast', function () {
        // Animation complete.
    });
}).mouseleave(function () {
    $(this).css('opacity', '0.6');
    $('#dropDown').hide('fast', function () {
        // Animation complete.
    });
});
于 2013-03-04T03:21:33.880 に答える
2

HTMLをDIV要素内にラップできます<div id="mNav"></div>

LIVE DEMO

と使用：

$('#mNav').on('mouseenter mouseleave', function( e ) {
    var mEnt = e.type=='mouseenter',
        opacity  = mEnt ? 1 : 0.6 ,
        showHide = mEnt ? 'show' : 'hide' ;
    $('#mNavigator').stop().fadeTo(300, opacity);
    $('#dropDown').stop()[showHide](400);
} );
于 2013-03-04T03:31:16.667 に答える
0

3行目を追加し.stop()てアニメーションのキューイングをキャンセルし、メニューにフォーカスがある限りメニューを開いたままにします。

$('#mNavigator, #dropDown').mouseover(function(){
    $(this).css('opacity','1');
    $('#dropDown').stop().show('fast', function() {
     // Animation complete.
    });
}).mouseout(function(){
    $('#mNavigator').css('opacity','0.6');
    $('#dropDown').hide('fast', function() {
     // Animation complete.
    });
});

フィドル： http： //jsfiddle.net/samliew/ECreX/5/

于 2013-03-04T03:19:39.007 に答える