Question

我正在尝试将一些jQuery魔法注入到水平下拉菜单中。在mouseover/mouseenter上它按预期工作，但mouseleave似乎没有被触发。我在这里设置了以下小提琴：http://jsfiddle.net/shalan/c28cU/8/。

将鼠标悬停在 ABOUT 上时，第二个级别是淡入淡出并向上滑入 ABOUT （它确实如此）下方的视图，但在mouseleave上只是消失而不是同时淡出和滑落。

我正在尝试解决可能存在的问题，但我的想法已经不多了。如果您查看上面引用的Fiddle，您将看到以下CSS行（CSS窗格中的第38行）：

/* INITIAL STYLING FOR 2ND LEVEL UL CONTAINER */
nav ul li ul {
    display:none;
    position:absolute;
    background:#777;
    top:50px;
}

现在，如果我注释掉display:none;行，那么mouseleave会按预期工作，但当您将鼠标悬停在 ABOUT 列表项目下方的区域时，它显然会激活。我还尝试了使用on()，hover()和bind()的不同JS方法 - 后者不起作用。

在这个阶段，我不确定它是JS还是CSS问题。我真诚地感谢这方面的任何帮助。非常感谢！

Answer 1

嘿，这是一个适合你的小提琴

http://jsfiddle.net/Gkp34/

我删除了css display: none;，而是在悬停时使用js设置样式block。

在mouseleave上我设置了动画的回调，以便在动画完成时设置display: none。

function usingOn() {
    nav.on({
        mouseenter: function() {
            $(this).find('ul').css('display','block').eq(0).stop(true, true).animate({ opacity:'1' , top: '40px' }, { duration:200, queue:false });
        },
        mouseleave: function() {
            $(this).find('ul').eq(0).stop(true, true).animate({ opacity:'0' , top: '50px' }, { duration:300, queue:false, complete: function () {
                            // Animation complete.
                            $(this).css('display','none');
                        } });  
        }
    });
}

这也适用于您的usingBind()或usingHover()功能。

Answer 2

使用mouseout而不是mouseleave，试试......

jQuery - Mouseleave没有开火

2 个答案: