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

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

上？

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

我已经设置了一个JSFiddle。

Answer 1

当您添加一些内联元素时，可以在没有 JavaScript 的情况下为子项目和父项目提供解决方案，这将触发悬停状态。

li>span:hover {
   background-color: lightgray;
   font-weight: bold;    
}

<ul>
    <li><span>fnord</span>
        <ul>
            <li><span>baz</span></li>
            <li><span>foo</span>
                <ul>
                    <li><span>baz</span></li>
                    <li><span>foo</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul> 

JSFiddle在这里。

Answer 2

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

JSFiddle

---

您找到的重复项上接受的答案是我见过的使用JavaScript执行此操作的最佳方法，使用

e.stopPropagation

：使用CSS

级联悬停效果。不过，您需要比该选择器中的“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 那里的答案。

所以你只想直接针对一个li？试试这个：

 ul li ul li:hover{
    background-color: red;
}

演示在这里

编辑

我还添加了另一个示例，菜单确实可以继续扩展。

使用此选择器进行悬停

ul ul li:hover {}

• 它只能使用 foo 来设置元素的样式

现在可以通过使用基于 Chromium 的浏览器的

:has()

和

:not()

伪选择器，使用纯 CSS，无需修改 HTML，但

:has

仅在 Firefox 121 中实现。了解最新支持状态请参阅https://caniuse.com/css-has

li:not(:has(li:hover)):hover {
  background-color: lightgray;
}

<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>

Answer 3

所以你只想直接针对一个li？试试这个：

 ul li ul li:hover{
    background-color: red;
}

演示在这里

编辑

我还添加了另一个示例，菜单确实可以继续扩展。

Answer 4

使用此选择器进行悬停

ul ul li:hover {}

• 它只能使用 foo 来设置元素的样式

Answer 5

现在可以通过使用基于 Chromium 的浏览器的

:has()

和

:not()

伪选择器，使用纯 CSS，无需修改 HTML，但

:has

仅在 Firefox 121 中实现。了解最新支持状态请参阅https://caniuse.com/css-has

li:not(:has(li:hover)):hover {
  background-color: lightgray;
}

<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>