Bootstrap如何设置下拉菜单Dropdown的悬停触发效果-Bootstrap教程-PHP中文网

bootstrap 5 默认禁用悬停触发下拉菜单，因源码未实现 hover 事件监听；需结合@media(hover:hover)和(focus-within)、js手动调用show()/hide()及防抖处理，方能安全启用。

bootstrap 5 默认不支持悬停触发下拉菜单，这不是你漏写了属性或 js 加载错了——是框架主动移除的逻辑。直接加 data-bs-trigger="hover" 不生效，纯 css 写 .dropdown:hover .dropdown-menu { display: block; } 会破坏焦点管理、aria-expanded 同步和动画，且移动端可能误触发。

为什么 `data-bs-trigger="hover"` 单独写没用

Bootstrap 5 的 Dropdown 构造函数里压根没实现 hover 的事件监听。文档中保留该属性，仅作占位或未来扩展预留；初始化时它被忽略，最终只响应 click 和 focus。常见现象是：DOM 上属性存在、控制台无报错、鼠标移入却完全静默。

data-bs-trigger="hover" 必须配合手动 JS 调用 show()/hide() 才能起效，否则只是个装饰
即使加了该属性，.dropdown-menu 的显隐仍由 Bootstrap 的 show 类控制，绕过它直接操作 display 会导致键盘导航失效、屏幕阅读器无法感知状态
移动端（包括 Surface 等二合一设备）若被错误识别为 hover 设备，菜单可能卡住或点击失灵

安全启用悬停的最小可行方案（CSS + JS）

核心是只在真正支持精细指针 + 明确 hover 能力的设备上启用，同时保留键盘可访问性。不能靠 UA 判断，得用环境特征检测。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

用 @media (hover: hover) and (pointer: fine) 包裹悬停相关 CSS，确保仅在鼠标/触控板设备生效
给 .dropdown 添加 :focus-within 规则：.dropdown:focus-within .dropdown-menu { display: block; }，让 Tab 导航用户也能展开
JS 中监听 mouseenter/mouseleave，调用 bootstrap.Dropdown.getInstance(el).show() 和 .hide()，而非直接改 DOM
关闭加 setTimeout 防抖（建议延迟 200–300ms），避免鼠标从触发器移到菜单途中因间隙导致闪退

document.addEventListener('DOMContentLoaded', () => {
  const dropdowns = document.querySelectorAll('.dropdown');
  dropdowns.forEach(d => {
    const instance = bootstrap.Dropdown.getInstance(d);
    d.addEventListener('mouseenter', () => instance?.show());
    d.addEventListener('mouseleave', () => {
      setTimeout(() => instance?.hide(), 250);
    });
  });
});

二级菜单悬停必须用 `.dropdown-submenu` 结构

Bootstrap 5 官方不提供二级悬停支持，也未定义 .dropdown-submenu 类。但若你要做，必须手动补结构与样式，否则 .dropdown-item:hover .dropdown-menu 选择器会失效——因为默认的 .dropdown-menu 是绝对定位在父级 .dropdown 下，不是紧贴 .dropdown-item。