如何只悬停嵌套ul中的当前li？ [英] How to hover only current li in nested ul?

问题描述

我有一个嵌套列表：

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 元素。

Problem is, hovering foo will also hover fnord and all its li-elements. How do I only hover the li my mouse is actually hovering over?

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

The nesting is variable and can, in theory, be endless.

我已设置 JsFiddle 。

推荐答案

我相信，你可以得到只有css最接近的是从悬浮元素的孩子去除悬停样式...这不帮助父母。 FIDDLE

I believe the closest you can get with just css is to remove the hover styling from the children of the hovered elements... which doesn't help the parents. FIDDLE

li:hover {
    background-color: lightgray;
}
li:hover {
    font-weight: bold;    
}
li:hover ul {
    background-color: white;
    font-weight: normal;
}

您发现的重复项接受的答案是我见过的最好的方式使用javascript，使用e.stopPropagation：层叠< li> -hover effect using CSS

The accepted answer on the duplicate you found is the best way I've seen to do this with javascript, using e.stopPropagation: Cascading <li>-hover effect using CSS

FIDDLE 的回答从那里。

$('li').mouseover(function(e)
{
    e.stopPropagation();
    $(this).addClass('currentHover');
});

$('li').mouseout(function()
{
    $(this).removeClass('currentHover');
});

这篇关于如何只悬停嵌套ul中的当前li？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！