Bootstrap 5 默认不支持 hover 触发下拉菜单，仅支持 click 和 focus；需用 JavaScript 配合防抖、触摸检测及 Popper 禁用实现可靠悬停效果。
Bootstrap 5 默认不支持 hover 触发下拉菜单
Bootstrap 5 官方移除了对 hover 触发下拉菜单的支持，只保留点击（click）和键盘（focus）触发。这是有意为之的设计取舍——为移动端兼容性让路。如果你在桌面端需要悬停展开，得自己补逻辑，不能指望 data-bs-toggle="dropdown" 自动生效。
用 CSS + JavaScript 补 hover 行为（推荐方案）
纯 CSS 方案在 Bootstrap 5 中不可靠（.dropdown:hover .dropdown-menu 会因 focus 状态丢失、过渡中断、移动端误触等问题失效），必须配合 JS 控制显示/隐藏时机和状态。
- 监听
mouseenter和mouseleave，手动调用show()/hide()方法 - 给
.dropdown添加data-bs-popper="none"避免 Popper.js 干预定位（悬停时位置易错乱） - 加防抖：鼠标快速划过多个菜单项时，避免
hide()和show()冲突导致闪烁 - 保留键盘可访问性：仅当不是触摸设备时才启用 hover；检测
'ontouchstart' in document.documentElement
示例片段：
if (!('ontouchstart' in document.documentElement)) {
document.querySelectorAll('.dropdown').forEach(dropdown => {
const bsDropdown = new bootstrap.Dropdown(dropdown);
dropdown.addEventListener('mouseenter', () => bsDropdown.show());
dropdown.addEventListener('mouseleave', () => setTimeout(() => bsDropdown.hide(), 100));
});
}
为什么不能只用 data-bs-trigger="hover"
这个属性在 Bootstrap 5 中**完全不存在**。它是 Bootstrap 4 的遗留写法，且当时也仅在部分插件（如 Tooltip、Popover）中支持，Dropdown 插件从未原生支持该配置项。如果你在 HTML 中写了 data-bs-trigger="hover"，它会被忽略，没有任何效果。
- Bootstrap 5 文档明确列出
Dropdown支持的触发方式只有click和focus - 试图通过修改
data-bs-offset或data-bs-boundary来“骗过”触发逻辑，无效 - 第三方库（如
bootstrap-hover-dropdown）大多未适配 Bootstrap 5 的模块化结构和 ES Module 导出方式，容易报bootstrap is not defined
移动端体验必须单独处理
悬停在触摸设备上无意义，强行启用会导致点击失效或菜单意外关闭。不要用 UA 判断，而要用环境特征检测。
- 用
'ontouchstart' in document.documentElement比检查navigator.userAgent更可靠 - 即使桌面浏览器开启响应式调试模式（如 Chrome DevTools 的 device toggle），
ontouchstart仍为false，不会误判 - 如果用户启用了“强制启用指针事件”的辅助功能（如 Windows 高对比度模式），也要确保
focus触发路径仍然可用
复杂点在于：hover 菜单的延迟关闭（比如鼠标移出后等 100ms 再 hide）和子菜单嵌套时的 hover 区域判定，这两处最容易被忽略，一不留神就卡死或断连。
