Question

我正在使用jquery在我的导航菜单上创建悬停效果。我的jquery如下：

$(".hoverMenu").css({"opacity":"0"});

        $("#menu-nav li:nth-child(2) a").hover(function(){
            $(".hoverMenu").stop().show().animate({
                top: '88',
                opacity: '1'
            }, 500);
        }, function(){
            $(".hoverMenu").stop().animate({
                top: '-247',
                opacity: '0'
            }, 500);
        });

当您将鼠标悬停在第二个菜单项上时，具有一类hoverMenu的div会向下设置动画，并增加其不透明度直到其完全可见。我遇到的问题是在hoverMenu动画之后，我希望能够将鼠标悬停在hoverMenu中的各个链接上。因为我正在离开menuNav（hovermenu引用了一系列列表项和锚点），hoverMenu动画备份。我想修改我的jquery，所以当你将鼠标悬停在.hovermenu上时，它不会动画回来。

如果这没有意义，我会把一个jsfiddle放在一起，但我觉得这是一个相当普遍的问题。总结一下，因为我在＃menu-nav上徘徊，hoverMenu动画起来;但我希望hoverMenu保持不变，直到我将hoverMenu和＃menu-nav

一起悬停

Answer 1

让hoverMenu成为＃menu-nav的孩子，当你将鼠标悬停在它上面时，它仍然会被视为悬停在＃menu-dav上，因为它是一个孩子。

Answer 2

这是一个相当普遍的问题，我更喜欢的方法是简单地将子菜单添加为主项的子项。这样，子菜单就是项目的一部分，上面有hover，因此进入子菜单的鼠标不会触发离开事件。这通常是有效的，因为子菜单通常绝对定位，所以将它添加为另一个项目的子项是微不足道的。

Jquery Hover动画问题

2 个答案: