bootstrap 5 原生不支持 hover 触发下拉菜单，官方已移除 data-hover 属性及 :hover css 方案的兼容性；需通过 javascript 结合 matchmedia 判断指针精度，并动态调用 show()/hide() 方法实现桌面端悬停、移动端点击的响应式交互。
Bootstrap 5 原生不支持 hover，别硬套 data-hover
Bootstrap 5 官方移除了 data-hover="dropdown" 支持，所有声称“v5 原生支持 hover”的说法都混淆了 v4 的遗留文档或第三方插件行为。直接在 <div class="dropdown"> 上加 <code>data-hover 属性完全无效，JS 不会监听它。如果你看到 hover 生效，大概率是项目里混入了 bootstrap-hover-dropdown 或自定义 JS，而非 Bootstrap 自身能力。
用 CSS :hover 实现悬停展开，但必须禁用移动端跳转
纯 CSS 方案简单：.dropdown:hover .dropdown-menu { display: block; }。但它会带来致命副作用：移动端轻点菜单项（如 @#@#@#@#@#@#@#@#@#@0）时，:hover 瞬间触发，同时 href 被执行，页面跳转，下拉菜单根本来不及展开。
真正可用的解法是动态控制 href：
- 监听全局
touchstart，设isTouch = true；桌面端无该事件，isTouch保持false - 对每个下拉主链接（如
.dropdown-toggle），在mouseenter时恢复href，mouseleave时设为# - 仅当
!isTouch时才执行上述逻辑；移动端始终维持href="#"，点击只触发 Bootstrap 默认下拉
bootstrap-hover-dropdown 插件仍可用，但要注意加载顺序和 DOM 就绪时机
这个插件不是 Bootstrap 官方组件，依赖 jQuery 和 Bootstrap 的 Dropdown 构造函数。常见失效原因不是配置错，而是引入顺序或初始化时机不对：
- 必须在
bootstrap.min.js之后、$(document).ready()之前引入bootstrap-hover-dropdown.min.js - 不能在
DOMContentLoaded之后再调用$().dropdownHover()，否则部分.dropdown元素可能已被 Bootstrap 初始化过，插件无法接管 -
delay: 300是较稳妥的关闭延迟值；hoverDelay: 0即可，加高反而增加误触风险 - 若菜单嵌套深或有动画，建议加
instantlyCloseOthers: true，避免多个.dropdown-menu同时显示遮挡
悬停交互在复杂导航中容易破坏可访问性
悬停看似流畅，但在以下场景会出问题：
- 键盘用户（Tab 导航）无法触发 hover，菜单不可达，必须额外补全
focus逻辑 - 触控笔或高精度触控屏（如 Surface）可能被错误识别为非 touch 设备，导致悬停生效但点击失效
- 屏幕阅读器用户依赖语义结构，而纯
:hover方案缺少aria-expanded动态更新，需手动同步
最常被忽略的一点：悬停菜单没有明确的「退出路径」——鼠标从触发器移到菜单边缘时，只要漏掉 1px，菜单就立刻收起。这不是 bug，是 :hover 的固有缺陷，必须靠 delay 或添加过渡区域（如用 padding 连接触发器与菜单）来缓解。
