Bootstrap 5 下拉菜单默认不支持 hover 触发，需用 @media (hover: hover) and (pointer: fine) 结合 CSS 悬停显示与 focus-within 支持键盘导航，并通过 JS 确保点击关闭，兼顾可访问性、动画一致性及多设备兼容性。
Bootstrap 5 默认不支持 hover 触发下拉菜单
Bootstrap 5 移除了所有 :hover 触发的交互逻辑，下拉菜单（dropdown）必须点击才能展开。这是为移动设备兼容性做的主动放弃——但桌面端用户确实常需要悬停即开。你不能靠改 data-bs-toggle="dropdown" 或加 trigger: "hover" 解决，因为 Bootstrap 5 的 JS 源码里根本没实现这个选项。
必须用自定义 CSS + 少量 JS 补齐，且要避开移动端误触问题。
- 纯 CSS 方案（无 JS）在触摸设备上会卡住菜单不收起，不可取
- 直接给
.dropdown:hover .dropdown-menu加display: block会破坏 Bootstrap 的show类逻辑，导致 JS 控制失效、动画丢失、焦点管理错乱 - 推荐方案：保留 Bootstrap 原生 JS 控制，仅用 CSS 覆盖悬停时的显示状态，并用 JS 区分指针设备
只在指针设备上启用 hover 下拉（避免手机误触发）
关键不是“加 hover”，而是“只在适合 hover 的设备上加”。Bootstrap 5 自带 prefers-reduced-motion 媒体查询，但没提供 hover 能力检测——得用 @media (hover: hover) and (pointer: fine)。
这段媒体查询意味着：“该设备支持悬停操作，且输入精度高（如鼠标/触控板），不是手指触摸屏”。
立即学习“前端免费学习笔记（深入）”；
@media (hover: hover) and (pointer: fine) {
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 0;
}
}
-
focus-within是必须加的：保证键盘用户（Tab 导航）也能触发，符合可访问性要求 - 不要写
.dropdown-menu { display: block !important }——会覆盖 JS 的show类，导致点击关闭失效 - 移除
margin-top: 0.125rem是为了对齐，否则悬停展开时菜单会突然下移一像素
修复悬停时的过渡动画和 z-index 层级
原生 Bootstrap 下拉菜单靠 .dropdown-menu.show 触发动画，而 CSS hover 方案绕过了 show 类，所以 opacity 和 transform 过渡不会生效。需手动补全：
@media (hover: hover) and (pointer: fine) {
.dropdown-menu {
opacity: 0;
transform: translateY(-0.25rem);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
opacity: 1;
transform: translateY(0);
}
}
-
z-index必须显式设置，否则悬停菜单可能被兄弟元素遮挡；建议设为z-index: 1000（与 Bootstrap 默认一致） - 过渡时间（
0.2s）应与 Bootstrap 的$dropdown-transitionSass 变量值对齐，否则动画节奏割裂 - 别忘了在
.dropdown-menu上加will-change: opacity, transform提升动画性能（尤其低端笔记本）
移动端回退：悬停菜单必须能被点击关闭
当用户从桌面切到平板横屏，或 Chrome 开发者工具模拟 touch 设备时，@media (hover: hover) 不匹配，CSS hover 失效，此时必须依赖原生点击逻辑。但如果你只写了 hover CSS，没管 JS 行为，可能出现：悬停打开后，点击空白处无法关闭。
根本原因是 Bootstrap 的 hidePrevented 机制在 hover 场景下未被正确触发。解决方案是微调 JS 初始化：
document.querySelectorAll('.dropdown').forEach(dropdown => {
const bsDropdown = new bootstrap.Dropdown(dropdown);
// 确保点击外部时仍能关闭，无论是否 hover 激活
dropdown.addEventListener('click', e => {
if (!dropdown.contains(e.target) && !e.target.closest('.dropdown-toggle')) {
bsDropdown.hide();
}
});
});
- 不需要重写整个 Dropdown 插件，只需确保
hide()在合适时机被调用 - 不要监听
document:click全局事件——会和 Bootstrap 内部事件冲突 - 如果用了 Popper 的
boundary或strategy: 'fixed'，需同步检查dropdown-menu是否溢出视口，否则悬停展开后部分内容不可见
最易被忽略的是：在 Windows 触摸屏笔记本上，系统可能同时报告 (hover: hover) 和 (pointer: coarse)，这时你的媒体查询会失效，菜单既不悬停也不点击响应——务必在真实设备上测试三种输入模式（鼠标、触控板、手指）。
