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

Posted 2023-05-08

【中文标题】如何只悬停嵌套ul中的当前li？

【英文标题】：How to hover only the current li in nested ul?

【发布时间】：2014-05-24 06:41:23

【问题描述】：

我有一个嵌套列表：

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。

【问题讨论】：

你想要一个纯 CSS 的解决方案？

@laaposto 最好是这样，但如果我不得不滥用 javascript 并为所有其他 lis 提供父级，那就这样吧。

【参考方案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>

JSFiddle

---

您找到的副本的接受答案是我见过的使用 JavaScript 执行此操作的最佳方法，使用 e.stopPropagation:Cascading <li>-hover effect using CSS。不过，您需要比该选择器中的“所有 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 的答案来自那里。

【参考方案2】：

当您添加一些内联元素时，子项和父项的解决方案都可以在没有 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 在这里。

【讨论】：

这工作完美无缺，应该更受欢迎，我不得不浏览许多相关问题才能找到这个非常优雅的解决方案。

【参考方案3】：

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

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

Demo here

编辑

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

【讨论】：

嵌套可以无限。这将选择 'foo'，但 'foo' 本身可能有一个带有多个 li 的子 ul，依此类推。

没错，如果您单击我的最后一个示例，您可以看到 foo 可以自行扩展。

这就是你说的无限扩展吗？

啊，我明白你在这里想要达到的目标。您将遇到的唯一问题是您不知道每个 li 将包含多少项目。因此，例如，如果您有 2 个项目，您可以将鼠标悬停在它们上方，您几乎可以猜测每个项目的位置。如果您有 10 个或更多项目，则很难找到特定项目。这个怎么样？ ：jsfiddle.net/Jj8B5/5

如果这解决了你的问题，你能接受我的回答吗？

【参考方案4】：

使用此选择器悬停

ul ul li:hover 

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