时间戳

首页 > 解决方案 > 为什么我的 CSS 悬停选择器不起作用？

javascript - 为什么我的 CSS 悬停选择器不起作用？

问题描述

我有这个 ul

<li><a href="../FrontEnd/Home.aspx"><img alt="" class="-logo" src="../assets/images/Logo@2x.png" /></a></li>
<li class="nav-item" id="mainPage"><a class="btn nav-link active" href="../FrontEnd/home.aspx">
الرئيسية
</a></li>
<li class="nav-item history" id="history">
عن الأتحاد
<ul class="dropdown" id="hidden">
    <li><a href="../FrontEnd/chairman.aspx"> كلمة رئيس الأتحاد</a></li>
    <li><a href="../FrontEnd/Organaizors.aspx">الأعضاء</a></li>
    <li><a href="../FrontEnd/History.aspx">تاريخ التأسيس</a></li>
</ul>
</li>
<li class="nav-item mission" id="mission"><a href="../FrontEnd/Mission.aspx">الهدف والرؤية</a></li>
<li class="nav-item " id="news"><a href="../FrontEnd/news.aspx">الأخبار</a></li>
<li class="nav-item gallery" id="album"><a href="../FrontEnd/gallery.aspx">معرض الصور</a></li>
<li class="nav-item videos" id="video"><a href="../FrontEnd/videos">الفيديو</a></li>

现在我想在历史上显示隐藏的菜单？

所以我做了

  #history:hover #hidden {
              display:block;
              background:#ffffff;
        }

它工作正常。

但是，如果我移动

<ul class="dropdown" id="hidden">
    <li><a href="../FrontEnd/chairman.aspx"> كلمة رئيس الأتحاد</a></li>
    <li><a href="../FrontEnd/Organaizors.aspx">الأعضاء</a></li>
    <li><a href="../FrontEnd/History.aspx">تاريخ التأسيس</a></li>
</ul>

里外？

它停止工作了？

所以我尝试了js灵魂

  $('#history').mouseenter(function () {
                $("#hidden").fadeIn();
                $("#hidden").fadeIn("fast");
                $("#hidden").show();
            })
        $('#history').mouseout(function () {
                $("#hidden").hide();
            });

这是jsfiddle

https://jsfiddle.net/mohammadjouharighsom/8v6na0fx/2/

任何原因 ？

标签： javascripthtmljquerycss

解决方案

但是，如果我将 [inner ul] 移到 li 之外...它停止工作

这停止工作的原因是您的 CSS 规则的选择器不再适用。

#history:hover #hidden

#history:hover和之间的空格#hidden转换为“选择 ID 为‘hidden’且位于 WITHIN 任何位置的元素” #history。

您的隐藏菜单位于 ID 的元素中history。因此，当您将菜单移出时，该规则不再适用。

您的 JavaScript 解决方案之所以有效，是因为您一次只能选择一个元素。

如果您打算放置内部列表，则需要将选择器更改为同级选择器。但是，您没有提供任何想要将内部菜单移出的理由。事实上，您的 HTML 反映了最常用的分层菜单结构。

推荐阅读