跳到主要内容

交互模式 · 状态反馈

悬停状态

Hover State

也叫:hover、鼠标悬浮、鼠标经过效果

鼠标移到元素上方时的样式变化,比如按钮变深、卡片浮起,用来提示用户这里可以点击。

示例

详细解释

悬停状态用 CSS 的 :hover 实现,是桌面端最基础的交互反馈:按钮背景变深一点、链接出现下划线、卡片加阴影并轻微上移、表格行背景变浅灰,同时鼠标变成手形 cursor: pointer。它回答的是用户心里的问题「这个能点吗」。

变化要克制:颜色深浅、阴影、几像素的位移就够了,配合 150~200ms 的过渡动画会更顺滑。不要在悬停时改变元素尺寸,否则会把周围内容挤动。

手机上没有悬停,所以重要信息和操作不能只在悬停时出现。比如悬停才显示的删除按钮,在手机上要常驻或换成其他入口。

开发者信息
术语 ID
interaction-hover-state
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29