0

我正在尝试将一些 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列表项下方的区域时，显然会激活。我还使用 , 和 - 尝试了不同的 JS 方法on()，hover()后者bind()不起作用。

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

4

2 回答 2

2

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

http://jsfiddle.net/Gkp34/

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

在 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()orusingHover()功能。

于 2013-07-16T08:27:35.027 回答
0

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

于 2013-07-16T08:18:08.957 回答