当前位置: 首页 > 面试题库 >

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

芮雪风
2023-03-14
问题内容

我有一个嵌套列表:

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>


 类似资料:
  • 问题内容: 我正在使用Material UI并尝试将普通的CSS类转换为js文件。 如何在材料ui模式中转换这些CSS样式。我没有看到任何有关如何为元素设置“活动”状态和嵌套悬停样式的示例。与此类高级方案相关的更多文档会有所帮助。 这是我在转换这些内容方面走了多少。 如何将其转换为材质样式 .navLink:hover > div:hover { 我尝试过的东西。 任何帮助表示赞赏。 问题答案:

  • 问题内容: 似乎这是在webdriver中(至少在Java api中)进行悬停/鼠标悬停的方法: Python API中有可能吗?用于python的webdriver api文档似乎未提及任何类似内容。 http://selenium.googlecode.com/svn/trunk/docs/api/py/index.html 如何在python webdriver中进行悬停/鼠标悬停? 问题答

  • 所以我使用这个代码来显示菜单中的深度3元素(wordpress): 问题是,当我悬停在一个带有子菜单的元素上时,所有带有子菜单的元素都会显示出来。 问题是: 如何只显示一个子菜单,我在我的鼠标悬停的时刻? 很抱歉添加了标记,无法添加“jquery” 编辑: HTML:

  • 我有这个样本: 链接 CODE超文本标记语言: 所有人都能清楚地理解错误所在,并能清楚地了解所有人的行为,包括发明者的行为,并能清楚地了解自己的真实性和准建筑风格。 代码CSS: 代码JS: 我希望div

  • 当进行内联样式化时,如何在ReactJS中实现悬停事件或活动事件? 我发现onMouseEnter、onMouseLeave方法有缺陷,所以希望有另一种方法来实现它。 具体地说,如果您非常快地将鼠标移到组件上,则只注册onMouseEnter事件。onMouseLeave从不激发,因此无法更新状态...使组件看起来就像仍然悬停在上面一样。如果您尝试模拟“:active”css伪类,我也注意到了同样

  • 本文向大家介绍在 Java 中,如何跳出当前的多重嵌套循环?相关面试题,主要包含被问及在 Java 中,如何跳出当前的多重嵌套循环?时的应答技巧和注意事项,需要的朋友参考一下 在最外层循环前加一个标记如outfor,然后用break outfor;可以跳出多重循环。例如以下代码: 运行结果如下所示: j = 0 j = 1 j = 2 j = 3 j = 4