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

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鼠标悬停在上面悬停？

嵌套是可变的，理论上可以是无穷无尽的。

。

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>

对于您发现的重复项，可接受的答案是用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>