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

我创建了一个基本的下拉菜单，我有两个问题希望专家能帮助解决

1）当您尝试将鼠标移到实际菜单项（显示 MY HEADER 的部分）上时，如何阻止菜单关闭 2）如果您在红色区域周围移动鼠标，菜单会很快保持循环，从而导致用户体验差，有什么办法吗？

为了方便起见，我在 jsfiddle 中包含了我的示例：http: //jsfiddle.net/ECreX/1/

4

3 回答 3

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 回答
2

如果将子菜单作为主菜单 div 的子菜单，并使用 .mousenter() 和 .mouseleave() 而不是 .mouseover() 和 .mouseout()，它可以解决问题。或者，您可以使用 .hover()，它是 .mouseenter() 和 .mouseleave() 的快捷方式。另请注意，通过嵌套子菜单 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 回答
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 回答