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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个嵌套列表：

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

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

。

回答：

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

以上是 如何仅将当前li悬停在嵌套ul中？ 的全部内容， 来源链接： utcz.com/qa/401176.html

回到顶部