Jquery悬停动画问题

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动画之后，我希望能够悬停在hoverMenu中的各个链接上。我想修改我的jquery，这样当你将鼠标悬停在.hovermenu上时，它就不会再有动画效果了。

如果这不合理，我会拼凑一个jsfiddle，但我觉得这是一个相当常见的问题。总而言之，由于我将鼠标悬停在# hoverMenu -nav上，因此hoverMenu会启动；但是，我希望在我将鼠标悬停在hoverMenu和#menu-nav上之前，它会一直保持不变

Answer 1

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

Answer 2

这是一个相当常见的问题，我更喜欢的方法是简单地添加子菜单作为主菜单项的子菜单。这样，子菜单是带有hover的项目的一部分，因此进入子菜单的鼠标不会触发离开事件。这通常是有效的，因为子菜单通常是绝对定位的，所以添加它作为其他项的子项是很简单的。