jquery 悬停 : keep hover while firing child element

Question

抱歉，如果这听起来像是一个基本或愚蠢的问题，但我在 PHP 和 Mysql 编程方面比 css 和 jquery 动画(目前)更强。我正在为应用程序构建一个主要基于 css3 的菜单。菜单位于屏幕左侧，宽度较小(31 像素；)，仅显示图像(不包含在 fiddle 中)。当您将鼠标悬停在列表中的元素之一时，css3 动画将使该元素放大 187 像素并显示一些文本。此列表的某些元素包含二级菜单。我现在所拥有的可以在名为“Incassi & Spese”的第四个元素上看到。我想要实现的是第二项“Dati di base”。子级菜单位于 wrapper_inside div 上，该 div 绝对位于相关菜单项下方，并且在悬停相关文本(本例中为“dati di base”)时应向下滑动。我已经设置了这个 javascript 来制作动画，但它不起作用:

$(document).ready(function(){
    $('.wrapper_inside').slideUp('normal');
    $('.menu > li > a').hover(
        function(){   
            setTimeout($(this).next('.wrapper_inside').slideDown('normal'),1000);
        },function(){
            $(this).next('.wrapper_inside').slideUp('normal');
        }
    );  
});

不工作意味着当我将鼠标悬停在元素上时，wrapper_inside 没有向下滑动。超时功能是为了等待一级菜单上的动画结束再向下滑动。我已经设置了一个 fiddle显示完整情况，可在此处找到。最好完全摆脱 js 并使用 css3 过渡完成向下滑动，但我不得不承认我不知道如何在一个元素上悬停时触发另一个元素的过渡

编辑:我修复了语法错误，悬停现在可以使用了。但是我无法在将 wrapper_inside 悬停时保持打开状态。怎么做？

Answer 1

选择器错误:

$('.menu > ul > li > a')应该变成 $('.menu > li > a')它将起作用。

编辑

您可以隐藏 mouseleave 上的子菜单像这样:

$(document).ready(function(){

    $('.wrapper_inside').hide();

    $('.menu > li > a').hover(
        function(){   
            $(this).next('.wrapper_inside').slideDown('normal');

        },
        function(){
            var $that = $(this);
            setTimeout(function() {
                if(!$('.active').length) {
                    $that.next('.wrapper_inside').slideUp('normal');
                }
            }, 100);
        }
    );

    $('.wrapper_inside').on("mouseenter", function(){   
        $(this).addClass('active');
    });

    $('.wrapper_inside').on("mouseleave", function(){   
        $(this).slideUp('normal');
        $(this).removeClass('active');
    });
});

fiddle :http://jsfiddle.net/29jmhs05/8/