根本原因是:hover间接改变渲染属性触发重排——如border显隐、display切换等；典型错误是.hover加border导致尺寸突变，应改用透明边框占位或outline-offset抵消外扩。
根本原因不是:hover本身，而是它间接改变了元素的渲染属性，导致浏览器重排（reflow）——最常见的是border显隐、display切换、float方向变化或伪元素参与文档流。
为什么加个border就让父容器“跳一下”
典型错误写法：.btn:hover { border: 2px solid #007bff; }。问题在于：默认状态没border，hover时突然增加2px宽高，盒子尺寸变化，父容器重新计算布局，兄弟元素被挤动。
- 透明边框占位是最稳妥的解法：
.btn { border: 2px solid transparent; }，hover只改border-color，不触发布局重排 - 若必须用outline，加
outline-offset: -2px抵消外扩，避免默认outline撑开空间 -
box-sizing: border-box不能解决这个问题——它只影响width/height是否含border，但border从无到有仍会改变总尺寸
伪元素::before/::after导致父元素高度异常或兄弟元素位移
比如导航项用::after画下划线，hover时width从0%变100%，还配合float: right → float: left，这会强制重排整个li及其父ul。
- 必须给父元素（如
li）加position: relative，否则::after会相对于body定位，位置完全失控 - 把
::after设为position: absolute，并用bottom: -2px等精确控制位置，让它脱离文档流 - 删掉
display: block和float——这两者会让伪元素参与行盒计算，拉高line-height，造成文字基线偏移
父容器用了transform: scale()，子元素:hover缩放就错位
一旦父元素有transform: scale(0.9)，它就创建了新的包含块，子元素的top/left和transform-origin都按缩放后尺寸计算，导致视觉偏移。
立即学习“前端免费学习笔记（深入）”；
- 子元素必须在常态样式中声明
transform-origin（如transform-origin: center），不能只写在:hover里，否则过渡时origin插值会跳变 - 真正有效的方式是让子元素脱离该坐标系：把子元素移出带transform的父容器，挂到一个
position: relative的外层wrapper下，再position: absolute定位 - 避免在父元素上同时用
transform和padding——padding会影响absolute伪元素的top/left基准，而transform又会让这个基准失准
最容易被忽略的一点是：某些浏览器（如 Safari 16–17）在:hover里动态加position: relative并配top偏移时，视觉上动了，但鼠标热区（hit-testing area）没同步更新，导致悬停失效或错位。这种问题只能靠提前设好position: relative，hover只动transform或opacity来规避。
