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類的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項的項目的一部分，因此，進入該子菜單的鼠標不會觸發離開事件。 通常這是可行的，因為無論如何子菜單通常都是絕對定位的，因此將其添加為其他項的子對象很簡單。