鼠标悬停或键盘 Tab 聚焦都能显示同一条说明;触摸点击后保持并给关闭。三条路径独立可达,hover 只是其中最快的一条。
先用实验台测三条发现路径
一个帮助按钮:鼠标悬停、Tab 聚焦、点击模拟触摸,看说明能不能出现在按钮上。切到「只用 :hover」的错误示范,观察聚焦和触摸路径如何断掉。
可发现性实验台
同一个「导出说明」帮助按钮。鼠标悬停、按 Tab 聚焦、点击(模拟触摸),能不能让说明出现?切到「只用 :hover」对照看哪条路径断掉。
当前触发:未触发提示未出现
- 指针悬停未测试:把鼠标移到按钮上
- 键盘聚焦未测试:按 Tab 聚焦按钮
- 触摸点击未测试:点击按钮模拟触摸
已验证 0/3 条路径可独立发现说明。把鼠标移到按钮上、按 Tab 聚焦(先移开鼠标)、或点击按钮模拟触摸,看提示是否出现在按钮上。
从刚才的操作里提炼
你在实验台上看到的就是 hover 的核心工作方式。
- hover 是附加反馈,不是唯一入口:指针悬停只是三条发现路径之一;键盘焦点和触摸必须能独立发现同样的信息。
- focus 独立可达:Tab 聚焦同一控件也应显示提示——实验台里聚焦路径标 ✓ 可发现,切到「只用 :hover」立即变 ✗ 不可达。
- 触摸要有触发和关闭:触摸没有稳定的 hover 事件;点击后提示保持可读并提供关闭,不要求 hover 才知道有帮助。
- 提示本身要可读、可关联:用
role="tooltip"+aria-describedby把提示和触发控件关联,辅助技术才能读到。 - hover ≠ focus,关闭时机不同:悬停是瞬时指针状态(离开即消失),焦点是键盘位置(失焦才消失);视觉可以相似,语义和 dismissal 时机不一样。
什么时候用 hover
从用户信号判断,也要知道什么时候它单独不够。
- 用:鼠标用户预览操作结果(按钮变深、链接出下划线)或补充简短说明,强化已经可见的入口。
- 用:与 focus、active 配合,给同一控件一套完整的状态反馈。
- 不用:把唯一的帮助、说明或操作藏进 :hover——键盘和触摸用户拿不到。
- 不用:让 hover 反馈替代 focus 样式;键盘位置需要独立的可见焦点环。
怎么用:从触发到可发现的最短路径
让同一条提示被三条路径独立发现,并保持可读。
- 给目标控件同时写
:hover与:focus-visible显示同一条提示,不依赖精细指针移动。 - 用
aria-describedby或aria-labelledby把提示元素关联到触发控件,提示容器加role="tooltip"。 - 触摸设备用点击或长按触发,提示出现后保持可读,并提供明确的关闭(再点、关闭按钮或失焦)。
- 保留清晰的 focus 样式;hover 反馈不能挤掉键盘焦点环。
正反例:同一帮助按钮,只改一处实现
围绕同一个帮助说明,只改变提示的触发方式,看用户后果如何不同。
鼠标移开就消失;键盘用户 Tab 上去拿不到说明,触摸用户点击后立即失焦也无法保持。唯一的帮助被藏进了指针设备才触发的伪类。
快速自测
触摸设备上没有稳定的 hover 事件,帮助说明应该怎样出现?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。