jQuery 悬停在孩子身上时的怪异

Question

http://jsfiddle.net/GNQyt/

将鼠标悬停在绿色框上，然后将鼠标移至子列表。突然开始疯狂地眨眼，无论如何要防止这种情况但保持悬停在孩子上方？

*之后编辑

Answer 1

这是您的工作代码 http://jsfiddle.net/GNQyt/18
我用的是延迟的方法。离开 .icn 后，您有 1000 毫秒到达 ul。如果您在所需的时间内点击 ul，淡出的请求就会被删除。

$('.icn').on({
    mouseenter: function() {

        clearTimeout($(this).data('timeoutId'));

        $(this).children('ul').show('fast');
    },
    mouseleave: function() {

        var self = this;

        var timeoutId = setTimeout(function() {
            $(self).children('ul').hide('fast');
        }, 1000);

        $(self).data('timeoutId', timeoutId); 
    }
});​

Answer 2

http://jsfiddle.net/GNQyt/5/

使用 mouseenter，而不是悬停在这种情况下

这是“Mouseenter”与“Mouseover”的一个很好的互动比较 http://api.jquery.com/mouseover/

Demo说的很清楚了。

Answer 3

闪烁是由于从绿色框移至弹出窗口而导致的。到 之间的距离导致计算机关闭弹出窗口，因为您已远离绿色框，但就在弹出窗口完全关闭之前，鼠标到达弹出窗口，导致其再次打开。理想情况下，两者应该相交，以允许鼠标直接从框移动到弹出窗口。或者，增加关闭弹出窗口之前的延迟。

Answer 4

闪烁不是因为悬停子项而是因为在关闭菜单时捕获了菜单。将菜单左上角移动 top: 0px; left: 0px; 解决了这个问题。此外，通过 height: 500px 更改跨度的高度和宽度； width: 500px; 也解决了。为了使高度和宽度有效，请将跨度更改为 div。

Answer 5

http://jsfiddle.net/GNQyt/17/

这是另一个带有碰撞箱的解决方案。这个几乎被黑客攻击了，但我想你会从中有所了解:)

请记住这

<span>
    <div>
    </div>
</span>

是一种非法操作，因为你不应该将块元素包装到内联元素中。