我相信使用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 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>
602392714
清零编程群