为什么我的CSS悬停选择器不工作

Question

我有这个ul

<li><a href="../FrontEnd/Home.aspx"><img alt="" class="-logo" src="../assets/images/[e-mail]" /></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-sultion

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

这是jsfiddle

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

有什么原因吗？

Answer 1

但是，如果我将[inter ul]移动到li之外。。。它停止了的工作

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

#history:hover #hidden

CCD_ 1和CCD_；选择位于#history内任意位置的ID为"hidden"的元素">

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

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

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

Answer 2

如果你试图阅读css类规则，当你把它移到li 之外时，它会给出为什么不起作用的答案

它读起来像

#history:hover #hidden{} --> "#hidden child inside #histroy when you :hover"

如果你想把它放在li之外，那么我认为js是的正确选择

Css实现这一目标的方法是：

选项1。如果隐藏标签是历史标签的下一个，请使用此

#history:hover + #hidden {...} 

选项2。如果隐藏标签直接在历史标签内，则使用此

#history:hover > #hidden {...} 

选项3。如果隐藏标签在历史标签内的某个位置，请使用此

#history:hover  #hidden {...} 

备选方案4。如果隐藏标签是历史标签的兄弟，请使用此

#历史：悬停~#隐藏｛…｝

还有其他更复杂的选择器，但是我认为除了这4个用例rest之外，我们应该使用js来操作DOM元素。