为 HOVER 选择一个没有子元素的元素答案

【问题标题】：Select an element with no children for HOVER为 HOVER 选择一个没有子元素的元素
【发布时间】：2023-03-08 03:50:01
【问题描述】：

我有以下html代码：

        <ul class="hover amazing-menu">
        <li>
            <a href="" class="link">item1</a>
        </li>
        <li class="parent-item">
            <a href="" class="link">item2 <span class="fa fa-caret-down"></span></a>
            <ul class="hover sub-menu">
                <li class="parent">
                    <a href="" class="link">sub-item1 <span class="fa fa-caret-right"></span></a>
                    <ul class="sub-menu2">
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                    </ul>
                </li>
            </ul>
        </li>

    </ul>

还有如下风格：

.hover > li.parent-item:hover > ul.sub-menu, .hover > li.parent:hover > ul.sub-menu2{
opacity: 1 !important;}

当我将鼠标悬停到具有 .parent-item 类的元素时，我想显示子菜单。它可以正常工作，但是当我将鼠标悬停在其子项上时，会显示子菜单。

【问题讨论】：

标签： html css hover styles

【解决方案1】：

尝试使用display: none;并触发显示元素:hover上的显示。

看这个例子：

ul.sub-menu,
ul.sub-menu2 {
  display: none;
}

a:hover + ul.sub-menu,
a:hover + ul.sub-menu2,
ul.sub-menu:hover,
ul.sub-menu2:hover {
  display: block;
}

        <ul class="hover amazing-menu">
        <li>
            <a href="" class="link">item1</a>
        </li>
        <li class="parent-item">
            <a href="" class="link">item2 <span class="fa fa-caret-down"></span></a>
            <ul class="hover sub-menu">
                <li class="parent">
                    <a href="" class="link">sub-item1 <span class="fa fa-caret-right"></span></a>
                    <ul class="sub-menu2">
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                    </ul>
                </li>
            </ul>
        </li>

    </ul>

Fiddle example

【讨论】：