jquery hover:在触发子元素时保持悬停状态

时间:2015-08-13 11:10:43

标签: jquery css3

很抱歉,如果这听起来像是一个基本或愚蠢的问题,但我在PHP和Mysql编程方面比css& jquery动画更强大(尚未)。 我正在为应用程序构建一个基于css3的菜单。菜单位于屏幕的左侧,宽度较小(31px;),仅显示图像(不包括在小提琴中)。当您将其中一个元素悬停在列表中时,css3动画将使该元素大187px显示一些文本。此列表的某些元素包含第二级菜单。我现在所看到的第四个元素是" Incassi& Spese&#34 ;.我想要实现的是第二项" Dati di base"。 sublevel菜单位于wrapper_inside div上,该div绝对位于相关菜单项下,并且在悬停相关文本时应该slideDown(" 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时无法保持打开状态。怎么做?

1 个答案:

答案 0 :(得分: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');
    });
});

小提琴:http://jsfiddle.net/29jmhs05/8/