悬停
Hover
初级网页悬停(Hover)是鼠标指针停留在界面元素上、尚未点击时的状态。它让产品在用户操作前给出反馈或补充信息,比如指针移到表格行上时,显示这一行可用的操作。
你可能会说:「鼠标移到表格某一行时,能不能显示这行能做的操作,移开后再收起来?」
动手看看订单表格的行悬停
订单号
客户
金额
操作
#20241
客户 1
¥ 128.00
#20242
客户 2
¥ 128.00
#20243
客户 3
¥ 128.00
行悬停背景
悬停时才显示操作
把鼠标移到任意一行上:背景变化告诉你「现在指着的是这一行」,还没点击,只是预告。
操作按钮只在悬停时出现,平时表格更干净。但手机没有悬停,触屏上要换成常驻按钮或长按菜单。
要点悬停是怎么触发和结束的?
- 1
指针移入就能触发悬停
你把鼠标指针移到按钮、卡片或表格行上,即使没有点击,也可能看到颜色变化或额外内容。因为触发条件是指针所在的位置,所以移开后,这些悬停效果通常就会消失。
- 2
悬停适合补充操作线索
做后台表格时,我们可以让行操作在悬停时出现,减少常驻按钮带来的拥挤。但如果「删除」只能在悬停时才看得见,用户可能根本不知道有这项操作;关键功能还得有容易发现的入口。
- 3
触屏和键盘需要其他入口
手机上用手指操作时,没有一个能稳定对应鼠标悬停的动作;只用键盘的用户则会通过聚焦找到控件。所以你让 AI 实现悬停效果时,也要说明触屏怎么操作、键盘聚焦时怎么获得同样的信息。
容易混淆的地方
悬停只表示指针停在元素上,不等于按下:鼠标按下按钮时的反馈属于按下状态,也不代表操作已经完成。它也不同于聚焦,聚焦表示元素当前可以接收键盘操作,可能由点击或键盘导航产生。我们可以让悬停和聚焦呈现相近的提示,但不能把两者当成同一件事。
什么时候用
适合用
- 做后台数据表格时,让鼠标移到某一行后显示编辑入口,方便用户确认自己正在操作哪条记录。
- 做网站导航时,让鼠标移到菜单项后显示相关子项,帮助用户在点击前找到目标页面。
- 做图表时,让鼠标移到数据点后显示具体数值,避免把所有数字同时堆在图上。
不适合用
- 做以触屏为主的 App 时,功能入口不能依赖悬停;用可见按钮或点按后展开的菜单更合适。
- 要求用户确认删除或付款时,悬停不是确认动作;用点击后的确认界面承接这个决定。
- 需要持续展示任务是否完成时,不靠悬停状态表达;用常驻的状态文字或图标更容易查看。
练一练选一个答案,看看解释
你在做一个同时支持电脑和手机的文件列表,想让每个文件都能打开更多操作。哪种设计最合适?
让 AI 帮你做复制给 AI Agent 直接用
请为文件列表实现悬停效果:鼠标指针移到某一行时显示该行的更多操作入口,移开后恢复;同时保证键盘聚焦时能找到并使用该入口,触屏上也有可点按的入口。不要让悬停本身触发文件操作。