Bootstrap 5 默认禁用 hover 触发下拉菜单，仅支持 click；需通过 data-bs-trigger="hover" 配合自定义 JS 实现 mouseenter/mouseleave 控制，并用 matchMedia 检测设备悬停能力以适配移动端。
Bootstrap 5 默认不支持 hover 触发下拉菜单
Bootstrap 5 移除了对 :hover 的原生支持，所有下拉菜单（Dropdown）默认只响应点击（click），这是故意为之的设计变更。如果你在升级后发现鼠标悬停没反应，不是代码写错了，是框架本身就不干这事。
常见错误现象：dropdown-menu 在悬停时一闪而过、无法保持展开、或完全无响应；控制台没有报错，但行为和 Bootstrap 4 不一致。
- 使用场景：导航栏顶部二级菜单、工具栏内嵌操作组，用户期望“指哪开哪”，而非必须点一下再点一下
- 根本原因：Bootstrap 5 的
DropdownJavaScript 插件默认禁用trigger: 'hover'，且 CSS 中也移除了.dropdown:hover .dropdown-menu这类样式规则 - 兼容性影响：强行加 CSS 悬停样式在移动端会引发意外展开（触摸设备无真正 hover），必须配合设备检测或媒体查询
用 data-bs-trigger="hover" + 自定义 JS 补齐行为
Bootstrap 官方文档其实留了口子：虽然不默认启用，但允许通过 data-bs-trigger 属性声明触发方式。不过仅设这个属性还不够——它只影响 JS 初始化逻辑，CSS 层仍需手动补全可见性控制。
实操建议分两步走：
- 在触发元素上添加
data-bs-trigger="hover"和data-bs-delay='{"show":100,"hide":200}'（防误触） - 必须写一段轻量 JS，在
mouseenter/mouseleave时显式调用show()/hide()方法，因为 Bootstrap 5 的hover支持是“半实现”的 - 避免直接用纯 CSS 模拟（比如
.dropdown:hover .dropdown-menu { display: block; }），否则会绕过 Bootstrap 的隐藏逻辑，导致键盘导航、焦点管理、A11Y 属性（如aria-expanded）全部失效
示例片段：
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-delay='{"show":100,"hide":200}'>
菜单
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项1</a></li>
</ul>
</div>
对应 JS（需在 DOM 加载后执行）：
document.querySelectorAll('.dropdown').forEach(dropdown => {
const trigger = dropdown.querySelector('[data-bs-toggle="dropdown"]');
const bsDropdown = new bootstrap.Dropdown(dropdown);
trigger.addEventListener('mouseenter', () => bsDropdown.show());
trigger.addEventListener('mouseleave', () => {
setTimeout(() => {
if (!dropdown.matches(':hover')) bsDropdown.hide();
}, 200);
});
});
移动端适配必须关掉 hover 行为
悬停菜单在手机上基本不可用：手指划过会误触发、长按可能弹出系统菜单、返回键逻辑混乱。不处理这点，上线后用户反馈第一句就是“点不开”。
判断依据不能只靠 screen.width，得用更可靠的方案：
- 用
matchMedia('(hover: hover)')检测设备是否支持悬停（现代浏览器支持良好） - 或者监听
touchstart事件，一旦触发就全局禁用所有下拉菜单的 hover 逻辑（更稳妥） - 千万别用
if (navigator.userAgent.includes('Mobile'))，既不准又难维护
推荐做法：初始化时检查 matchMedia('(hover: hover)').matches，为 false 就跳过绑定 mouseenter/mouseleave，只保留 click 行为。
第三方插件 bootstrap-hover-dropdown 已不兼容 Bootstrap 5
很多老项目还在用 bootstrap-hover-dropdown 这类 jQuery 时代的插件，它们依赖 Bootstrap 4 的构造函数签名和内部方法（比如 $().dropdown('toggle')），在 Bootstrap 5 下会直接报 Uncaught TypeError: Cannot read properties of undefined 或静默失败。
替代思路很明确：
- 不要降级 Bootstrap 版本迁就旧插件——安全更新和新组件会持续缺失
- 不要魔改插件源码去适配——它没维护，后续升级仍是坑
- 直接用上面提到的手动 JS 绑定方案，代码不到 20 行，可控、可测、无额外依赖
真正容易被忽略的是：悬停菜单的「延迟关闭」必须带防抖，否则快速扫过多个菜单项时，hide() 会抢在下一个 show() 前执行，造成闪烁或断连。那个 setTimeout 里的 dropdown.matches(':hover') 判断，少写这一句，体验就掉一大截。
