E1.11.4no hover on disabled设计研究

状态组合中悬停与禁用不应同时出现

别名: 禁用仍悬停 · :hover:disabled · disabled hover

概念解释

禁用表示此刻不能激活。悬停表示「对准了,可以激活」。两态同时出现——指针移上去,禁用按钮却亮起悬停色、换成手型——是在用一条通道说能点、另一条说不能。状态组合里悬停与禁用不应同时出现:禁用要吞掉悬停,而不是叠加上去。

机制

状态机里禁用是吸收态:进入之后,指向类的瞬时态不应再被显示,否则瞬时态会把吸收态顶掉。实现上最常见的漏洞是样式按层叠叠加::hover 写在 :disabled 后面,或 pointer-events 仍在,于是禁用键走进悬停规则。人用光标形状和亮度变化当「可点」的快证据,文案上的灰来不及赢。辅助技术若仍把焦点放在禁用控件上并播报可激活,组合冲突会再进听觉通道。触摸没有悬停,但键盘焦点环若在禁用键上画出「可操作」的样式,冲突换一条通道回来。

怎么研究

把指针移上明确禁用的按钮,记录外观、光标、是否发出点击事件。再加键盘 Tab 到禁用键。

自变量::hover:disabled 的样式顺序、是否 pointer-events: none、焦点是否可落到禁用。 因变量:出现悬停外观的比例、尝试点击、把禁用报成可点。

只看静态禁用样张看不到组合。必须有指针进入这一步。

边界

有些场景允许禁用键获得焦点以便读出「为什么不可用」,焦点环可以在,但不应借用悬停高亮。工具提示解释禁用原因可以在指针进入时出现,那是说明,不是悬停态——外观应保持禁用,不要亮成可点。加载锁不是禁用,加载时的指针变化另算。

怎么落地

  • 写状态样式时让禁用规则压过悬停;选择器不要让两者同时生效。
  • 禁用时光标用默认箭头,不要手型;点击不触发动作也不走按下动画。
  • 若保留焦点以便读原因,焦点环用「不可用」样式,不要复用可点焦点。
  • 验证:慢慢把指针滑过一排按钮,其中夹着禁用。禁用那枚若闪一下亮色或换成手型,悬停就已经叠上去了。

延伸

  • 同组E1.11.1 多主题或暗色模式下五态需分别校验而非直接映射 · E1.11.2 图标按钮的禁用态需同时降低图标与文字的可见度 · E1.11.3 同一按钮出现在不同背景容器上时状态对比需重新核实
  • 相邻E1.02 按钮的状态 · D1.05 悬停反馈 · D1.07 禁用态
  • 站内检索disabled hover · :disabled · state combinatorics

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.11.4