UI 组件状态与变体 / Hover
Hover
指针悬停在可交互目标上的状态。
Identity · 身份
- 子类型
- 状态或变体
- 父级类目
- Button、Input、Select、Back Link、Skip Link、Color Swatch、Color Field、Color Area、Color Slider、Date Field、Time Field、Email Input、Tel Input、URL Input、Currency Input、Quantity Input、File Trigger、Password Visibility Toggle、Meter、Inline Loading、Scrollbar、Resize Handle、Drag Handle、Logo、Illustration
What · 是什么
- 定义
- 指针悬停在可交互目标上的状态。
- 实现表现
- 提供轻微背景、边框或阴影变化。
Why · 为什么
- 实现目标
- 不依赖 hover 才能发现或完成任务。
How · 怎么做
- 实现说明
- 默认值明确;状态转换可预测;键盘和触摸路径完整;读屏可感知;高对比和 reduced motion 下仍可用。
Evidence · 证据
- 局限与边界
- 使用语义状态、可见焦点、文本等价和适当的 ARIA 属性表达;不只依赖颜色、动画或声音。
Lifecycle · 生命周期
- 状态
- 启用
适用组件类型与部件
关系来自本地关系表,并包含反向关联。
- AbbreviationAbbreviation反向 · 应用于
提供缩写的完整含义和可访问解释。
- AudioAudio反向 · 应用于
播放或表达音频内容的媒体单元。
- Back LinkBack Link属于
返回上一级或父级页面的导航链接。
- BlockquoteBlockquote反向 · 应用于
标识引用内容、来源或用户话语的语义文本单元。
- ButtonButton属于
触发动作、提交选择或打开流程。
- Color AreaColor Area属于
在二维色彩空间中选择饱和度、明度或色调。
- Color FieldColor Field属于
输入或编辑颜色值的单一字段。
- Color SliderColor Slider属于
沿一维色带选择色相、透明度或其他颜色通道。
- Color SwatchColor Swatch属于
显示可选择颜色的视觉色块,并暴露颜色名称和数值。
- Currency InputCurrency Input属于
输入金额并显示货币和数值格式的字段。
- Date FieldDate Field属于
由日期分段或单一文本组成的日期输入控件。
- Date SegmentDate Segment反向 · 应用于
日期字段中的年、月、日等可独立编辑的分段。
- Drag HandleDrag Handle属于
表达可拖拽对象起始位置和抓取目标的控件。
- Email InputEmail Input属于
输入并验证电子邮件地址的字段。
- EmojiEmoji反向 · 应用于
以标准化字符或图形表达短文本语义和情绪。
- File TriggerFile Trigger属于
触发系统文件选择器但不承担完整上传流程的控件。
- Focus RingFocus Ring反向 · 应用于
统一表达键盘焦点和当前交互目标的视觉轮廓。
- IllustrationIllustration属于
解释概念、状态或品牌语气的插图内容单元。
- Image PlaceholderImage Placeholder反向 · 应用于
在图片加载、缺失或不可用时提供稳定的占位内容。
- Inline LoadingInline Loading属于
嵌入内容上下文中的轻量加载指示器。
- InputInput属于
接收用户输入,并提供焦点、错误和只读反馈。
- List MarkerList Marker反向 · 应用于
表达有序、无序、任务或自定义列表关系的标记。
- LogoLogo属于
识别组织、产品、合作方或品牌的标志内容单元。
- MapMap反向 · 应用于
以空间坐标或区域关系表达地点信息的内容单元。
- MarkMark反向 · 应用于
在文本中标识需要强调、命中或搜索高亮的片段。
- MentionMention反向 · 应用于
在文本中引用用户、团队、对象或实体的内联标记。
- MeterMeter属于
显示处于范围内但不一定代表完成度的数值。
- Password Visibility TogglePassword Visibility Toggle属于
切换密码字段可见性的单一控制。
- Presence IndicatorPresence Indicator反向 · 应用于
表达用户、设备或协作者在线/离线状态的指示器。
- QR CodeQR Code反向 · 应用于
将 URL、文本或结构化数据编码为可扫描图形。
- Quantity InputQuantity Input属于
输入商品或资源数量的数字字段。
- Resize HandleResize Handle属于
调整面板、列、窗口或媒体尺寸的拖拽手柄。
- ScrollbarScrollbar属于
表达可滚动区域位置和可操作范围的滚动条。
- SelectSelect属于
Select 如何在界面中被理解、操作或组合?
- Skip LinkSkip Link属于
跳过重复导航、直接进入主内容的辅助导航链接。
- Social IconSocial Icon反向 · 应用于
代表社交网络或外部服务的可点击品牌图标。
- Status DotStatus Dot反向 · 应用于
用小型圆点表达在线、警告、成功或其他状态。
- Tel InputTel Input属于
输入电话号码并适配地区、键盘和格式化规则的字段。
- Text FieldText Field反向 · 应用于
提供文本输入、名称、帮助和验证语义的基础字段单元。
- Time FieldTime Field属于
由时间分段或单一文本组成的时间输入控件。
- Time SegmentTime Segment反向 · 应用于
时间字段中的时、分、秒和周期等可独立编辑的分段。
- URL InputURL Input属于
输入并验证 URL 的字段。
- Visually Hidden TextVisually Hidden Text反向 · 应用于
只为辅助技术或上下文提供说明而不显示在视觉布局中的文本。