Javascript 隐藏菜单元素不工作

我需要隐藏class元素

媒体标题

，并使其仅在一个鼠标悬停在其上时可见，并且当一个鼠标悬停在父菜单上时，子菜单的第一个元素也需要可见

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

请看一看|

我也无法理解为什么图像会自动更改，而不是

媒体标题

元素

谢谢

---

请随时作出改变，使它看起来更专业，因为我只是一个初学者

不需要jquery。首先删除jquery。。你的代码运行良好

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

.dropdown li:first-child .dd-panel

---

从您的css文件中

可能不是最优化的示例，但它正在工作

为此，我使用jquery，所以，我删除了CSS中每个子菜单的悬停状态

然后我用jquery添加悬停/退出效果：

$(".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");

看到这个了吗

询问您在使用时是否遇到问题。

工作 试试这个

    $(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");
    });


});

---

希望这能有所帮助，谢谢

我尝试使用css使其工作，但没有工作，所以切换到jquery。如果我添加背景色而不是透明图像，那么效果很好，但我需要使其在透明度上工作。@ArpitSrivastava如何将鼠标悬停在具有

display:none

的元素上？我的坏消息是

类名>第二类名{display:none}

和

类名：hover>第二类名{display:block}

@ArpitSrivastava，你能把它固定在小提琴上吗……我以前也有类似的东西。

。导航ul li a:hover。下拉ul li p:first child{display:block；}

我确实想显示图像和文本。但我希望它仅在该元素的悬停效果上可见，并且当将鼠标悬停在它的父菜单

li

@KnowledgeSeeker上时，第一个子菜单元素和相关文本将可见。很抱歉，延迟已修复，我已更新了演示和code@KnowledgeSeeker请看小提琴