悬停Hover
你可能会说
鼠标放上去的时候按钮变个色，让人知道它能点。
指针设备悬停在交互元素上方时触发的即时视觉反馈状态。链接变色、卡片略微浮起或按钮增加阴影，都可以用 hover 提示它可以操作。反馈应当轻微且与点击后的结果一致；触屏设备通常没有悬停，因此菜单入口、说明和关键功能不能只在 hover 时显示。
也常被叫作鼠标悬停悬停态:hover
什么时候用
- 保存→保存
- 卡片 Card 悬停反馈：可用克制的阴影、颜色或位移提示可点击；幅度应结合卡片密度和布局测试→
- 次要操作悬停显现：列表行的编辑、删除按钮可在常态降低视觉强调，但仍要兼顾键盘与触屏入口需求文档 v3
- 补充解释：陌生术语或图标可配合 文字提示 Tooltip，并支持键盘聚焦与触屏访问利润率：毛利润 ÷ 营收利润率 ⓘ
什么时候不用
- 移动端没有悬停：需要为 hover 内容提供触控替代方式手机上没有悬停，提示永远出不来
- 关键信息只藏在 hover 里：触控或键盘用户可能无法获取必填！不填无法提交提交
- 反馈幅度过大：大幅缩放、旋转或跳动会干扰操作悬停
- 唯一入口只在悬停时出现：应保持可发现性并提供替代入口项目设置编辑
组成结构 · Anatomy
悬停我变色 / 浮起 / 阴影transition .15s
指针进入它的范围，hover 就开始了
变色、浮起或加阴影，要轻
平滑的状态切换；时长应按任务、输入方式和动效系统设定
常见变体 · Variants
变色Color
按钮按钮
按钮、链接最轻量的反馈
浮起Lift
卡片提示可以点进去
显现Reveal
文档 v3 ✎ 🗑
次要操作平时藏起来
典型使用场景
按钮悬停变色
2026 年产品规划
悬停中：变色 + 微微浮起，预告“可以点”
卡片悬停浮起
表格行悬停高亮
行悬停：高亮整行，编辑、删除淡入显现
图标悬停出提示
✎
收藏
★
⬇
⋯
悬停图标按钮，浮出功能说明
延伸阅读 · 权威出处