Question

我需要隐藏类元素media-caption，并且只有当一个悬停在它上面时才能看到它，当一个鼠标悬停在父菜单上时，需要显示子菜单的第一个元素。

我尝试使用jquery修复它，但到目前为止它没有以正确的方式工作。

请查看Fiddle | fiddle demo view

我也无法理解为什么图像会自动更改而不是media-caption元素。

感谢。

请随意进行更改，使其看起来更专业，因为我只是一个初学者。

Answer 1

可能不是最优化的样本，但它正在发挥作用。

我使用jquery，因此，我删除了CSS中子菜单的每个悬停语句。

然后我用jquery添加hover / out效果：

$(".dropdown ul li").each(function(){
    $(this).mouseenter(function(){
            $(this).parent().find( ".active" ).css( "display", "none" );
            $(this).find( ".dd-panel" ).css( "display", "block" );

     });
});

 $(".dropdown ul li").each(function(){
    $(this).mouseleave(function(){
            $(this).find( ".dd-panel" ).css( "display", "none" );
            $(this).parent().find( ".active" ).css( "display", "block" );
     });

});

我也添加了一个标志，以便识别第一个必须显示的元素，如果没有悬停：

$(".dropdown li:first-child .dd-panel",$(this)).css( "display", "block" );
$(".dropdown li:first-child .dd-panel",$(this)).addClass("active");

请参阅此fiddle

询问你是否有使用它的麻烦。

Answer 2

不需要jquery。首先删除jquery ..你的代码工作正常。

如果您不想显示第一个子项图像，则只需删除以下代码

.dropdown li:first-child .dd-panel

来自您的css文件

Answer 3

工作DEMO

试试这个

    $(document).ready(function () {

    $(".nav>li").on("mouseenter", function () {
        if($(this).find('.dd-panel').length>0)
        {
       $(this).find('.dropdown').addClass("has-panel");
        }
        $(this).find(".media-caption:first").css("display", "block");

    });

    $(".nav>li").find(".dropdown li:not(li:first)").on("mouseenter", function () {

        $(this).parents('.nav>li').find('.media-caption:first').css("display", "none");
    });


});

希望这有帮助，谢谢

隐藏菜单元素无效

3 个答案:

工作DEMO