details标签原生仅支持点击或键盘操作展开，不支持:hover悬浮触发，因违背其可访问性设计原则；若需悬浮效果，应改用div+JS方案，并手动管理焦点、ARIA状态及键盘交互。
details 标签本身不支持悬浮展开
<details> 是语义化折叠控件，原生只响应 点击（或空格/回车键），没有 onmouseenter 或 CSS :hover 触发展开的机制。强行用 :hover + <details> 在多数浏览器中无效——Chrome、Firefox 都会忽略对 <details> 元素的 :hover 展开行为，因为这违背其可访问性设计原则（焦点、键盘操作优先）。
如果你看到“悬浮展开”，背后实际是：放弃 <details>，改用 <div> + JS 控制显隐，或者用 CSS visibility/opacity 模拟，但必须自行管理焦点、键盘交互和屏幕阅读器支持。
用 div + JS 实现悬浮球菜单（推荐方案）
把悬浮球做成固定定位的 <button> 或 <div>，菜单内容放在同级 <div class="menu"> 中，通过 JS 监听 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; }），也会遇到这些实际问题：
-
<summary>点击会触发toggle事件，但mouseenter不会——JS 无法监听到“悬浮时展开”的原生事件 - 在 Safari 中，
<details open>的样式可能被:hover干扰，导致闪动或无法收起 - 键盘用户 Tab 到
<summary>后按空格，会意外关闭刚被鼠标悬停打开的菜单（状态不同步） - WCAG 要求“hover 可取消”，即用户移出区域应能取消操作——而
<details>没有提供取消 hover 的钩子
兼容性与性能提醒
悬浮球菜单的性能瓶颈通常不在 DOM，而在事件绑定和重排：
- 避免给
document绑定mousemove来模拟 hover；用元素自身的mouseenter/mouseleave更轻量 - 菜单内链接建议用原生
<a>，别全用div + click——否则要手动处理Ctrl+Click新标签页等默认行为 - 如果菜单内容动态加载，注意
fetch完成后再focus()第一个项，否则焦点可能落在 body 上 - IE11 不支持
<details>，但你本就不该用它做悬浮菜单——所以这个兼容性问题反而不存在
真正难的是让悬浮菜单既响应快、又符合键盘和读屏习惯。hover 效果只是表象，焦点管理、状态同步、中断逻辑才是容易被跳过的部分。
