Jquery Hover одушевленный выпуск

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);
        });

Когда вы наводите курсор мыши на второй элемент меню, div с классом hoverMenu анимирует вниз и увеличивает его непрозрачность, пока не станет полностью видимой.Проблема, с которой я сталкиваюсь, заключается в том, что после анимации hoverMenu я хочу, чтобы можно было навести курсор на отдельные ссылки в hoverMenu.Поскольку я зависаю над menuNav (меню hovermenu содержит большое количество элементов списка и якорей), hoverMenu выполняет анимацию обратно.Я хочу изменить мой jquery, чтобы при наведении курсора на .hovermenu он не возвращался к анимации.

Если это не имеет смысла, я соберу jsfiddle, но я чувствую, что это довольно распространенная проблема,Подводя итог, потому что я зависаю от # menu-nav, hoverMenu оживляет;однако я бы хотел, чтобы меню hoverMenu оставалось на месте, пока я не выключу ОБА меню hoverMenu и # menu-nav

Answer 1

Это довольно распространенная проблема, и я предпочитаю подход просто добавить подменю как дочерний элемент основного элемента. Таким образом, подменю является частью элемента с hover на нем, поэтому вход в подменю мыши не будет вызывать событие выхода. Обычно это работает, поскольку подменю обычно в любом случае абсолютно позиционировано, поэтому добавить его в качестве дочернего элемента другого элемента тривиально.

Answer 2

Сделайте hoverMenu дочерним по отношению к # menu-nav, и когда вы наводите на него курсор, он все равно считается парящим над # menu-dav, поскольку это дочерний элемент.