如何在嵌套的ul中仅悬停当前的li？

Question

我有一个嵌套列表:

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>

问题是,徘徊"foo"也会徘徊"fnord"及其所有li元素.我如何只悬停li我的鼠标实际上是在盘旋？

嵌套是可变的,理论上可以是无穷无尽的.

我已经设置了一个JSFiddle.

Answer 1

我相信只有CSS才能获得最接近的是从悬停元素的子项中移除悬停样式......这对父母没有帮助.

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

您找到的副本上接受的答案是我用JavaScript看到的最佳方式,使用e.stopPropagation:使用CSS级联<li> - 悬停效果.你想要比那个选择器中的'all lis'更具体:

$('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从那里得到答案.

Answer 2

当你添加一些内联元素时,可以在不使用JavaScript的情况下为子项以及父项提供解决方案,这将触发悬停状态.

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在这里.