返回知识库

产品与设计 · 交互状态与指针

悬停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 样式;键盘位置需要独立的可见焦点环。

怎么用:从触发到可发现的最短路径

让同一条提示被三条路径独立发现,并保持可读。

  1. 给目标控件同时写 :hover:focus-visible 显示同一条提示,不依赖精细指针移动。
  2. aria-describedbyaria-labelledby 把提示元素关联到触发控件,提示容器加 role="tooltip"
  3. 触摸设备用点击或长按触发,提示出现后保持可读,并提供明确的关闭(再点、关闭按钮或失焦)。
  4. 保留清晰的 focus 样式;hover 反馈不能挤掉键盘焦点环。

正反例:同一帮助按钮,只改一处实现

围绕同一个帮助说明,只改变提示的触发方式,看用户后果如何不同。

正例帮助提示同时绑 :hover 与 :focus

鼠标悬停或键盘 Tab 聚焦都能显示同一条说明;触摸点击后保持并给关闭。三条路径独立可达,hover 只是其中最快的一条。

反例说明只写在 button:hover

鼠标移开就消失;键盘用户 Tab 上去拿不到说明,触摸用户点击后立即失焦也无法保持。唯一的帮助被藏进了指针设备才触发的伪类。

快速自测

触摸设备上没有稳定的 hover 事件,帮助说明应该怎样出现?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。