How to hover only the current li in nested ul?

问题:

I have a nested list:

li:hover {
  background-color: lightgray;
}
ul li ul li:hover {
  font-weight: bold;
}

<ul>
  <li>fnord
    <ul>
      <li>baz</li>
      <li>foo
        <ul>
          <li>baz</li>
          <li>foo</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>gnarf
    <ul>
      <li>baz</li>
      <li>foo
        <ul>
          <li>baz</li>
          <li>yolo</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Problem is, hovering "foo" will also hover "fnord" and all of its li elements. How do I hover only the li my mouse is actually hovering over?

The nesting is variable and can, in theory, be endless.

I have setup a JSFiddle.

回答1:

I believe the closest you can get with just CSS is to remove the hover styling from the children of the hovered elements... which doesn't help the parents.

li:hover {
    background-color: lightgray;
}
li:hover {
    font-weight: bold;    
}
li:hover ul {
    background-color: white;
    font-weight: normal;
}

<ul>
    <li>fnord
        <ul>
            <li>baz</li>
            <li>foo
                <ul>
                    <li>baz</li>
                    <li>foo</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>gnarf
        <ul>
            <li>baz</li>
            <li>foo
                <ul>
                    <li>baz</li>
                    <li>foo</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JSFiddle

---

The accepted answer on the duplicate you found is the best way I've seen to do this with JavaScript, using e.stopPropagation: Cascading <li>-hover effect using CSS. You'll want to be more specific than 'all lis' in that selector though:

$('li').mouseover(function(e)
{
    e.stopPropagation();
    $(this).addClass('currentHover');
});

$('li').mouseout(function()
{
    $(this).removeClass('currentHover');
});

.currentHover {
    background-color: red;
}
li.currentHover ul {
    background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
    <li>fnord
        <ul>
            <li>baz</li>
            <li>foo
                <ul>
                    <li>baz</li>
                    <li>foo</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>gnarf
        <ul>
            <li>baz</li>
            <li>foo
                <ul>
                    <li>baz</li>
                    <li>foo</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JSFiddle of the answer from there.

回答2:

A solution for subitems and also for parents is possible without JavaScript, when you will add some inline element, which will trigger hover state.

li>span:hover {
   background-color: lightgray;
   font-weight: bold;    
}

<ul>
    <li><span>fnord</span>
        <ul>
            <li><span>baz</span></li>
            <li><span>foo</span>
                <ul>
                    <li><span>baz</span></li>
                    <li><span>foo</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul> 

JSFiddle here.

回答3:

So you just want to directly target an li? Try this:

 ul li ul li:hover{
    background-color: red;
}

Demo here

Edit

I also added another EXAMPLE of where the menu could indeed keep on expanding.

回答4:

Use this selector to hover

ul ul li:hover {}

• it can style only element with foo