即使在悬停后悬停在图标上也会使显示可见

Question

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

目前，我在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>

我的 CSS 是：

#gear-btn {
    position: relative;
}

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

.gear-dropdown {

    position: absolute;
    right: 5px;
    display: none;
    width: 200px;
    z-index: 100;
    border: 1px solid black;

}

现在奇怪的是，如果我将鼠标悬停在齿轮图标上，菜单会下降到它下面，但即使我滚动菜单，它仍然可见，直到我的光标离开 .gear-dropdown li。这不是我所期望的，因为只有当我将鼠标悬停在基于 css 的齿轮图标上时它才应该可见（我没有 .gear-dropdown:hover 选择器）。这是预期的效果，但我正在努力学习 CSS 并弄清楚为什么会这样。

谢谢！

Answer 1

所以，你有一个齿轮图标。当您将鼠标悬停在 gear-btn 元素上时，它会显示一个下拉菜单。请考虑整个元素 - 齿轮图标 + 下拉菜单只有一个父元素，即 <li id="gear-btn">。即使您将鼠标悬停在它的子项上，您仍然悬停在 <li id="gear-btn">.

上

Answer 2

发生这种情况是因为鼠标悬停甚至会冒泡到所有父元素。因此，当鼠标悬停在下拉菜单上时，hover 也会应用于父元素 (#gear-btn)，这又会应用 class #gear-btn:hover .gear-dropdown。使用 css.

无法阻止事件冒泡

为了仅在悬停图标时显示下拉菜单，您可以更改 class 如下：

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

或者，如下

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

即使在悬停后悬停在图标上也会使显示可见

Hovering over icon leaves display visible even after hover

html

css

hover