如何实现站点navbar（导航栏）鼠标悬停时自动展开？

默认Bootstrap框架的导航栏下拉菜单仅支持点击触发，要实现悬停触发效果，按以下步骤调整代码即可：

步骤1：新增CSS悬停触发规则 #

添加以下CSS代码，在桌面端自动触发悬停下拉，移动端保留原有点击触发逻辑，避免触屏体验问题：

@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    /* 消除默认margin避免鼠标移入下拉区域时触发范围断开 */
    margin-top: 0;
  }
}

CSS代码可以直接放到站点自定义CSS文件末尾，或者插入到页面<head>标签内的<style>标签中。

步骤2：修复可能出现的闪烁问题 #

如果修改后出现悬停时菜单闪烁、延迟显示的问题，补充以下CSS代码：

.dropdown-menu {
  /* 禁用默认过渡动画消除闪烁 */
  transition: none;
}

步骤3：可选JS增强适配 #

如果需要同时保留点击触发功能、且悬停状态和Bootstrap原生交互逻辑统一，添加以下JS代码：

// 仅桌面端生效悬停逻辑
if (window.innerWidth >= 992) {
  document.querySelectorAll('.navbar .dropdown').forEach(dropdownEl => {
    // 鼠标进入展开下拉
    dropdownEl.addEventListener('mouseenter', () => {
      dropdownEl.classList.add('show');
      const toggleEl = dropdownEl.querySelector('.dropdown-toggle');
      const menuEl = dropdownEl.querySelector('.dropdown-menu');
      toggleEl.setAttribute('aria-expanded', 'true');
      menuEl.classList.add('show');
    })
    // 鼠标离开收起下拉
    dropdownEl.addEventListener('mouseleave', () => {
      dropdownEl.classList.remove('show');
      const toggleEl = dropdownEl.querySelector('.dropdown-toggle');
      const menuEl = dropdownEl.querySelector('.dropdown-menu');
      toggleEl.setAttribute('aria-expanded', 'false');
      menuEl.classList.remove('show');
    })
  })
}

JS代码放到页面</body>标签之前加载即可生效。

注意：上述代码中的992px是Bootstrap默认的桌面端断点，如果你自行修改过导航栏折叠的阈值，需要将代码中的断点值替换为你实际使用的数值。

内容的提问来源于stack exchange，提问作者Kasun Chanuka