我有一个嵌套列表：
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元素.我如何只悬停我的鼠标实际上是在盘旋？
嵌套是可变的,理论上可以是无穷无尽的.
我已经设置了JSFiddle.
解决方法
我相信只有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>
您找到的副本上接受的答案是我使用e.stopPropagation：Cascading <li>-hover effect using CSS看到用JavaScript执行此操作的最佳方式.您希望在该选择器中比’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.
