悬停或聚焦时的内容

要求内容

当额外内容——工具提示、弹出框、子菜单——因用户悬停或聚焦某元素而出现时，必须满足三项规则。可关闭：用户无需移动指针或焦点即可将其关闭（通常通过 Escape 键实现）。可悬停：用户将指针从触发元素移入已显示的内容时，内容保持可见。持久存在：内容不会超时自动消失，直至用户主动关闭或触发元素失去焦点。

如何满足

• 将 Escape 键绑定为关闭任何因悬停或聚焦而打开的工具提示或弹出框。
• 确保工具提示元素本身可被鼠标指针到达——不要将其定位在移动指针时会触发触发元素 mouseout 事件的位置。
• 不要在用户仍在悬停或聚焦触发元素时超时自动关闭工具提示。
• 使用 aria-describedby 将触发元素与弹出内容关联，使屏幕阅读器能播报相应内容。
• 使用 HTML popover 属性或经过验证的库（Popper.js、Floating UI、Radix UI）构建弹出框——这些工具已内置处理上述规则。
• 对于下拉子菜单，在父菜单项与子菜单之间留出适当的过渡区域，使指针无需触发关闭即可穿越。

常见失败情形

• 纯 CSS :hover 工具提示在触发元素与提示框之间存在间隙——指针移入间隙后触发 mouseout，工具提示消失。
• 工具提示在用户仍处于悬停状态时，2 秒后自动关闭。
• 无 Escape 键处理——键盘用户无法在不离开当前字段的情况下关闭由聚焦触发的工具提示。
• 下拉菜单在指针略微偏离父菜单项时立即关闭，在到达子菜单项之前就已消失。
• 由聚焦触发的弹出框占据可视区域且无法通过 Escape 隐藏——永久停留在页面上。

为何重要

本成功准则最常被手写工具提示和纯 CSS 下拉菜单所违反。建议改用已内置处理可关闭性和可悬停性的库，或根据三项规则逐一审查自定义代码。这是一项高回报的修复：悬停内容在复杂 UI 中无处不在，因此在共享组件中一次性处理正确，可大幅清除审计债务。