引导导航栏下拉菜单闪烁/不起作用答案

【问题标题】：Bootstrap Navbar dropdown flickering / not working引导导航栏下拉菜单闪烁/不起作用
【发布时间】：2021-06-15 00:03:19
【问题描述】：

我在一个项目中使用了这个FlexStart Boostrap Template，但我注意到导航栏上的下拉菜单中有一个问题。当我将鼠标悬停在菜单和子菜单上时，它会闪烁。花了很多时间却解决不了。你能说明为什么这不起作用吗？

【问题讨论】：

标签： javascript html jquery css bootstrap-5

【解决方案1】：

原因是退出导航菜单时播放的动画。菜单向下移动并淡出。但是，由于您的鼠标挡住了路，它会触发淡入和上移动画。

在您的示例中，请注意仅在动画期间菜单与光标交互时才会发生闪烁。

假设您的代码完全相同，则动画由 .navbar .dropdown ul 类的 :hover 伪选择器触发。

从以下选择器 .navbar .dropdown:hover > ul 和 .navbar .dropdown ul 中删除 top 属性。

.navbar .dropdown:hover > ul {
    opacity: 1;
    top: 100%; /* Delete This */
    visibility: visible;
}

.navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: 100%; /* Delete This */
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border-radius: 4px;
}

【讨论】：

【解决方案2】：

简单地说，因为您不再将鼠标悬停在菜单链接本身上，您将离开链接并悬停在 .navbar .dropdown ul 的 10 像素底部填充上。

这里有一张图片来解释.navbar .dropdown ul 上的padding: 10px 0 以及菜单消失的原因：

当您将鼠标悬停在绿色区域（ul 顶部 10 像素和底部 10 像素）时，表示您没有将鼠标悬停在链接上。

您可以简单地删除该填充，它不会再闪烁了。

【讨论】：

感谢您的支持