悬停Hover
视觉效果与操作状态鼠标移入时提示这里可以互动
悬停状态出现在鼠标还没点击之前，可以用颜色、阴影或轻微位移提示元素能操作。移动端没有稳定的悬停，所以关键信息和功能不能只在 hover 时出现。
悬停我浮起 + 阴影 + 变色
悬停变色
对照组毫无反应
把鼠标逐个放上去，感受“能点”和“不能点”的差别
什么时候用
- 保存→保存
- 卡片 Card 悬停浮起：轻微阴影 + 上移 1~2px，提示可以点进去→
- 次要操作悬停显现：列表行的编辑、删除按钮，平时淡一点需求文档 v3
- 补充解释：术语、缩写的说明交给 文字提示 Tooltip，悬停再看利润率：毛利润 ÷ 营收利润率 ⓘ
什么时候不用
- 移动端没有悬停：手指只有“点”，hover 内容在手机上出不来手机上没有悬停，提示永远出不来
- 关键信息只藏在 hover 里：必填规则、价格，不悬停永远不知道必填！不填无法提交提交
- 反馈太夸张：放大 1.3 倍、旋转、乱跳，轻一点才高级悬停
- 唯一入口只在悬停时出现：功能等于隐身，用户根本找不到项目设置编辑
组成结构 · Anatomy
悬停我变色 / 浮起 / 阴影transition .15s
1触发元素Trigger指针进入它的范围，hover 就开始了
2悬停反馈Feedback变色、浮起或加阴影，要轻
3过渡Transition0.1~0.2s 平滑切换，别生硬跳变
常见变体 · Variants
变色Color
按钮按钮
按钮、链接最轻量的反馈
浮起Lift
卡片提示可以点进去
显现Reveal
文档 v3 ✎ 🗑
次要操作平时藏起来
典型使用场景
按钮悬停变色
2026 年产品规划
悬停中：变色 + 微微浮起，预告“可以点”
卡片悬停浮起
表格行悬停高亮
行悬停：高亮整行，编辑、删除淡入显现
图标悬停出提示
✎
收藏
★
⬇
⋯
悬停图标按钮，浮出功能说明