Why my CSS hover selector is not working? [duplicate]

问题

I have this 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>

now I want on history over to show the hidden menue ?

so I did

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

it is working ok.

However if I move

<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>

outside the li ?

it stopped working ?

So I tried the js soultion

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

Any reason ?

回答1:

However if I move [inner ul] outside the li ... it stopped working

The reason this stopped working is because your CSS rule's selector no longer applied.

#history:hover #hidden

The space between #history:hover and #hidden translates to "select the element with ID 'hidden' that is anywhere WITHIN #history."

Your hidden menu is within an element with the ID history. Hence when you move your menu out of it, the rule no longer applies.

The reason your JavaScript solution would work is because you only select one element at a time.

If you intend to place the inner list, you will need to change your selector to a sibling selector. However, you didn't provide any reason why you would want to move the inner menu out. In fact, your HTML reflects the most commonly used structure of a hierarchical menu.

回答2:

if you try to read the css class rule, that will give you the answer as to why it does not work when you move it outside the li

It reads something like this

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

If you want to keep it outside the li then i think the js is the right way to go

The Css way to achive this is :

Option 1. If the hidden tag is next to the history tag use this

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

Option 2. if the hidden tag is directly inside the history tag use this

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

Option 3. if the hidden tag is somewhere inside the history tag use this

 #history:hover  #hidden {...}

Option 4. if the hidden tag is a sibling of the history tag use this

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

There are other more complex selectors also however i think apart from these 4 use case rest we should use js to manipulate the DOM elements.

来源：https://stackoverflow.com/questions/65678531/why-my-css-hover-selector-is-not-working

标签

javascript

html

jquery

css