返回知识库

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

鼠标指针Cursor

用和真实行为一致的 cursor 提示动作,不让光标取代元素角色、disabled 和可见文案。

光标真相核验台:这个 not-allowed 有没有说谎

同一个 not-allowed 光标,可能配真禁用,也可能挂在仍能删除的按钮上。切换情形,把鼠标悬到「删除项目」上看光标,再点它或用 Tab 聚焦——按钮物件本身会告诉你它到底能不能删。

选一种情形,把鼠标悬到「删除项目」上看光标,再点它、或用 Tab 聚焦——按钮物件本身会告诉你它到底能不能删。

悬停看到的光标:not-allowed
键盘:Tab 跳过(真 disabled)点击:无效(真禁用)
操作记录(长在物件上的结果)

还没有操作。试试悬停、点击或用 Tab 聚焦上面的控件。

判定 · 诚实:not-allowed 配真 disabled 和原因;键盘跳过、点击无效。触控和读屏用户看不到光标,实际语义由 disabled 和可见文案承接。

提示:触控设备没有鼠标光标,键盘和读屏用户也看不到它——光标只能辅助,不能独自承担「能不能操作」的语义。

光标的四个要点

刚才面板里发生的,就是这四点。

  • 光标是提示不是合同:pointer / grab / not-allowed / text 只帮鼠标用户预期,真正语义来自元素角色、状态和文案。
  • not-allowed 不能伪造禁用:挂在可点按钮上,键盘仍可达、点击仍触发——这是谎言,鼠标用户会被骗。
  • 真禁用要配套:用 disabled / aria-disabled 阻断行为,写出原因和恢复路径,not-allowed 只作辅助提示。
  • 触控、键盘和读屏没有光标:要靠按钮名、disabled、aria-live 和可见文案承接全部语义。

什么时候配什么光标

从用户要做什么判断,别把 not-allowed 当万能灰。

  • 可点入口(按钮、链接、可激活图标)→ pointer;但动作名仍由按钮文字说出。
  • 拖拽区 / 可抓取对象 → grab,按下后变 grabbing;同时要有键盘等价操作。
  • 正文、说明、可复制内容 → 保持 text,别误设成 pointer 或 grab。
  • 真禁用控件 → disabled + 原因 + 恢复路径,not-allowed 仅辅助;不要挂在还能点的元素上。

怎么用得对

从开始到判断的最短路径,关键是光标跟真实行为对齐。

  • 先用对的元素和状态(button / disabled / aria-disabled),再配匹配的 cursor,而不是反过来。
  • 禁用原因用 aria-describedby 关联,并在控件附近写出(本页演示写在按钮身上)。
  • 自定义光标要有足够对比和回退,不遮挡焦点环和文本选择。
  • 触控 / 键盘路径单独验收:没有鼠标时任务仍能完成,反馈仍可见。

正反例:同一个删除按钮

只改一个关键选择:not-allowed 是配真禁用,还是挂在仍可点的按钮上。

正例 · 诚实禁用

按钮 disabledaria-disabled,身上写「需要所有者权限」,配 not-allowed 辅助。键盘跳过、点击无效、读屏宣告禁用——光标和行为一致。

反例 · 伪禁用

按钮仍可点,只设 cursor: not-allowed。鼠标用户以为不能删,键盘和点击却真的触发删除——光标在撒谎,可能造成误删。

快速自测

一个按钮挂了 not-allowed 光标,但你 Tab 到它后按回车竟然触发了删除。问题出在哪?

继续查证

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

下一步学

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