details标签原生仅支持点击或键盘操作展开，不支持:hover悬浮触发，因违背其可访问性设计原则；若需悬浮效果，应改用div+js方案，并手动管理焦点、aria状态及键盘交互。

details 标签本身不支持悬浮展开

<details></details> 是语义化折叠控件，原生只响应 点击（或空格/回车键），没有 onmouseenter 或 CSS :hover 触发展开的机制。强行用 :hover + <details></details> 在多数浏览器中无效——Chrome、Firefox 都会忽略对 <details></details> 元素的 :hover 展开行为，因为这违背其可访问性设计原则（焦点、键盘操作优先）。

如果你看到“悬浮展开”，背后实际是：放弃 <details></details>，改用 <div> + JS 控制显隐，或者用 CSS <code>visibility/opacity 模拟，但必须自行管理焦点、键盘交互和屏幕阅读器支持。

用 div + JS 实现悬浮球菜单（推荐方案）

把悬浮球做成固定定位的 <button></button> 或 <div>，菜单内容放在同级 <code><div class="menu"> 中，通过 JS 监听 <code>mouseenter/mouseleave 切换 show 类控制显示：

<button id="float-btn" aria-expanded="false" aria-controls="float-menu">●</button>
<div id="float-menu" class="float-menu" role="menu">
  <a href="/home" role="menuitem">首页</a>
  <a href="/settings" role="menuitem">设置</a>
</div>

关键实操点：

• 必须手动同步 aria-expanded 和 aria-controls，否则屏幕阅读器无法识别展开状态
• 菜单出现后，需用 focus() 把焦点移到第一个 menuitem，并监听 Escape 键关闭
• 不要只靠 display: none 隐藏菜单——它会让元素脱离可访问树，应配合 aria-hidden="true" 和 inert 属性（或用 visibility: hidden; position: absolute; 保留在布局流中）
• 移动端无 hover，必须保留点击触发逻辑（click 事件 fallback）

为什么别硬套 details 标签做悬浮菜单

即使你用 CSS 强行覆盖（比如 details:hover summary { display: block; }），也会遇到这些实际问题：

Baoyu Markdown To Html

将 Markdown 转换为微信兼容的样式化 HTML，支持代码高亮、数学公式、PlantUML、脚注、提示框、信息图以及可选机器人...

下载

• <summary></summary> 点击会触发 toggle 事件，但 mouseenter 不会——JS 无法监听到“悬浮时展开”的原生事件
• 在 Safari 中，<details open></details> 的样式可能被 :hover 干扰，导致闪动或无法收起
• 键盘用户 Tab 到 <summary></summary> 后按空格，会意外关闭刚被鼠标悬停打开的菜单（状态不同步）
• WCAG 要求“hover 可取消”，即用户移出区域应能取消操作——而 <details></details> 没有提供取消 hover 的钩子

兼容性与性能提醒

悬浮球菜单的性能瓶颈通常不在 DOM，而在事件绑定和重排：

• 避免给 document 绑定 mousemove 来模拟 hover；用元素自身的 mouseenter/mouseleave 更轻量
• 菜单内链接建议用原生 <a></a>，别全用 div + click——否则要手动处理 Ctrl+Click 新标签页等默认行为
• 如果菜单内容动态加载，注意 fetch 完成后再 focus() 第一个项，否则焦点可能落在 body 上
• IE11 不支持 <details></details>，但你本就不该用它做悬浮菜单——所以这个兼容性问题反而不存在

真正难的是让悬浮菜单既响应快、又符合键盘和读屏习惯。hover 效果只是表象，焦点管理、状态同步、中断逻辑才是容易被跳过的部分。