Html 将鼠标悬停在图标上，即使在鼠标悬停后也可以看到显示

我正在尝试制作一个带有可选链接的下拉菜单。我正在使用一个齿轮图标悬停在上面，以显示一个下拉菜单

目前，我在

ul

中有一个

li

，如下所示：

<li id="gear-btn">
    <i class="fas fa-cog"></i>
    <ul id="gear-dropdown" class="gear-dropdown hidden">
    <li>
        <ul class="editions">
            <span class="dropdown-subtitle">Edition</span>
            <li><a href="#">CSS</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">Javascript</a></li>
            <li><a href="#">Ruby</a></li>
        </ul>
    </li>
    <li>
        <span class="dropdown-subtitle">Help</span>
        <ul class="help">
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </li>
</ul>
</li>

现在奇怪的是，如果我将鼠标悬停在gear图标上，菜单会下降到它下面，但即使我在菜单上滚动，它仍然可见，直到我的光标离开

.gear下拉列表li

。这不是我所期望的，因为它只有在我基于css将鼠标悬停在齿轮图标上时才可见（我没有

.gear下拉列表：hover

选择器）。这是期望的效果，但我正在尝试学习CSS并找出为什么会发生这种情况

---

谢谢

所以，您有一个齿轮图标。当您将鼠标悬停在

gear btn

元素上时，它会显示一个下拉菜单。

---

请考虑这整个元素-COG图标+下拉菜单有一个单亲，它是代码> > Li id＝“齿轮BTN”> 。即使将鼠标悬停在其子元素上，您仍将鼠标悬停在其上，因为鼠标悬停在所有父元素上。因此，当鼠标悬停在下拉列表上时，父元素（#gear btn）也会应用

悬停

，这反过来会应用类

#gear btn:hover.gear下拉列表

。使用css无法阻止事件冒泡

为了仅在悬停图标时显示下拉列表，您可以如下更改类：

#gear-btn:hover .gear-dropdown:not(:hover) {
    display: block
}

或者，如下所示

#gear-btn > i:hover + .gear-dropdown {
    display: block;
}

#gear-btn > i:hover + .gear-dropdown {
    display: block;
}