时间戳

首页 > 解决方案 > 悬停在图标上即使在悬停后仍显示可见

html - 悬停在图标上即使在悬停后仍显示可见

问题描述

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

目前，我有一个li如下ul：

<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 并弄清楚为什么会发生这种情况。

谢谢！

标签： htmlcsshover

解决方案

发生这种情况是因为鼠标悬停甚至会冒泡到所有父元素。因此，当鼠标悬停在下拉列表上时，hover也会将 应用于父元素（#gear-btn），而后者又会应用 class #gear-btn:hover .gear-dropdown。无法使用 css 阻止事件冒泡。

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

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

或者，如下

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

推荐阅读