0

这个问题相当直截了当，但我找不到很好的相关示例来解决我的问题。我有一个菜单栏，当用户将鼠标悬停在某个项目上时，会div出现一个子菜单。

http://jsfiddle.net/Sx9J2/3/

HTML

<div class="nav">
    <a href="#">MENU ITEM</a>
</div>

<div class="box">
    THIS IS THE BOX
</div>

JS

$(document).ready(function(){

    $(".nav a").hover(
        function(){
            $(".box").show();
        }, function() {
            if (!$(".box").is(":hover")) $(".box").hide();
        }
    );

    $(".box").mouseleave(function() {
        $(this).hide();
    });

});

上面的代码在很多情况下都有效，但我在测试中看到过div即使鼠标悬停也会隐藏的时候。我的猜测是事件之间一定存在某种冲突。这个问题在 Firefox 和 IE 中尤其严重。

有什么更好的方法来处理这种视觉效果？

4

2 回答 2

1

问题是菜单项和您的 .box 元素之间有 1px 的间隙。设置top: 37px它应该可以工作

编辑：

您必须包装子菜单和菜单项并监听包装器的悬停事件：

http://jsfiddle.net/Sx9J2/7/

于 2013-08-07T21:56:07.740 回答
1

你的菜单和你的盒子之间有一个很小的差距。如果您将顶级 CSS 更改为

 .box   {position:absolute; top:36px; background:#eee; width:200px; height:100px;left:18px;display:none}

这对我来说效果更好

于 2013-08-07T21:56:20.313 回答