悬停不应造成布局位移
别名: layout shift · pointer instability · hover jitter · cumulative layout shift
概念解释
悬停引发的布局位移（hover-induced layout shift）是指指针进入元素后，组件尺寸、文本换行、相邻项位置或页面滚动范围发生变化，导致原本稳定的目标移动。悬停反馈本应帮助探索；若它把对象推开、把指针挤出热区或改变邻项位置，反馈会反过来破坏操作。常见例子包括悬停时加粗文字导致换行、增加边框使卡片变大、展开说明把下方按钮推走，或菜单开合使指针不再落在原项目上。
机制
指针交互假定目标的空间位置在接近和点击之间相对稳定。进入状态若改变盒模型或文档流，用户的手部运动计划立刻过期；小幅移动在密集目标、细菜单和高缩放下尤其容易让指针滑到邻项。更糟的是「悬停—位移—离开—复位」的振荡：元素一移动就失去悬停，复位后又重新触发，形成闪烁和难以进入的区域。视觉动效可以吸引注意，但若它改变命中区域或周围布局，就把提示信号变成了控制噪声。
怎么研究
使用真实鼠标与触控板完成菜单浏览、卡片比较和小目标点击，记录指针进入后离开次数、重试、错误点击和完成时间。应在不同缩放、文本长度、本地化语言、窗口宽度与系统指针速度下观察；仅看默认文案的录屏常会错过换行导致的位移。可用布局变化监测定位元素位置与尺寸的跳变，但还需看它是否恰好发生在用户需要保持指针稳定的时刻，而非把所有动画都误判为问题。
边界
不是所有悬停后的视觉变化都禁止。颜色、透明度、阴影、覆盖层和不占文档流的预览可以增强反馈；有意展开的菜单或详情也可改变空间，只要用户有可预测的进入路径、足够的容错区域且目标不会在指针下逃走。对于键盘焦点或触屏展开，布局变化的风险模式不同，不能直接用鼠标悬停结论替代。关键判断是变化是否打断了正在进行的指向动作。
怎么落地
- 使用不改变占位尺寸的背景、内阴影、transform 或预留边框表达悬停；避免在 hover 时添加会参与布局的边框、文字或内容。
- 为会展开的菜单、卡片和工具提示设置稳定的锚点与容错区域，检查指针从触发器移动到浮层不会穿过空隙。
- 在最长本地化文案、最窄响应式断点和高缩放下做布局回归，关注文本粗细与说明出现是否改变邻项位置。
- 录制用户反复扫过密集目标的过程；出现进出抖动、误点或必须「追着元素点」时，视为悬停设计失败。