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

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

我相信使用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>

---

对于您发现的重复项，可接受的答案是用Javascript做到这一点的最佳方式，方法是

e.stopPropagation

：使用CSS级联

<li>

-hover效。不过，您将要比该选择器中的“ 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 >    <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>