交互模式 · 状态反馈
悬停状态
Hover State
也叫:hover、鼠标悬浮、鼠标经过效果
鼠标移到元素上方时的样式变化,比如按钮变深、卡片浮起,用来提示用户这里可以点击。
详细解释
悬停状态用 CSS 的 :hover 实现,是桌面端最基础的交互反馈:按钮背景变深一点、链接出现下划线、卡片加阴影并轻微上移、表格行背景变浅灰,同时鼠标变成手形 cursor: pointer。它回答的是用户心里的问题「这个能点吗」。
变化要克制:颜色深浅、阴影、几像素的位移就够了,配合 150~200ms 的过渡动画会更顺滑。不要在悬停时改变元素尺寸,否则会把周围内容挤动。
手机上没有悬停,所以重要信息和操作不能只在悬停时出现。比如悬停才显示的删除按钮,在手机上要常驻或换成其他入口。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
interaction-hover-state- DOM 选择器
- 没有 DOM 线索,这个概念不在页面上直接识别。
- 优先级
- 1 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/09/29