我有一个嵌套列表：
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鼠标悬停在上面悬停？
li
嵌套是可变的，理论上可以是无穷无尽的。
。
我相信使用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”更具体：
e.stopPropagation
<li>
$('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>
