滚动时:hover卡顿主因是width/height等布局属性触发高频重排，应仅用transform/opacity并配will-change；transition须与@media(hover: hover)同级声明，避免漏写或pointer-events冲突。
滚动时:hover触发重排导致卡顿
页面滚动过程中，如果元素的 :hover 样式依赖 width、height、left、top 或 margin 等会触发布局（Layout）的属性，浏览器必须在每一帧滚动中反复计算尺寸和位置——这直接引发高频重排，造成肉眼可见的卡顿。
- 典型错误写法：
.card:hover { width: 320px; }或.btn:hover { margin-left: 10px; } - 滚动时哪怕只是悬停在某个区域，只要该区域有:hover规则且含布局属性，就可能被意外激活（尤其当父容器有
overflow: hidden或transform隔离不当时） - Chrome DevTools 的“Rendering”面板勾选 “Paint flashing” 和 “Layout Shift Regions” 可直观看到哪些:hover变化正在强制重绘或重排
伪类动画未启用硬件加速
即使用了 transform 和 opacity 这类只触发合成（Composite）的属性，若未主动提示浏览器提前准备图层，iOS Safari 或低端 Android 设备仍可能 fallback 到软件渲染，滚动叠加:hover动画时掉帧明显。
- 必须加
will-change: transform, opacity;到 hover 目标元素上（注意：不要滥用，仅对真正频繁动画的元素设置） - 更稳妥的写法是结合
transform: translateZ(0)或backface-visibility: hidden强制提升图层，但will-change语义更清晰 - 避免写成
.btn:hover { will-change: auto; }——auto无意义，浏览器忽略；必须明确指定属性名
@media (hover: hover) 块内 transition 未同步包裹
很多人把 :hover 样式放进 @media (hover: hover) and (pointer: fine)，却忘了把 transition 声明也包进去。结果是：鼠标设备能跑动画，但滚动时浏览器因样式表解析不一致，可能临时降级为逐帧计算，导致卡顿。
- 错误写法：
@media (hover: hover) and (pointer: fine) { .nav-item:hover { background: #007bff; } } .nav-item { transition: background 0.2s ease; } - 正确写法：
@media (hover: hover) and (pointer: fine) { .nav-item { transition: background 0.2s ease; } .nav-item:hover { background: #007bff; } } - 移动端即使不走:hover，该媒体查询块里的
transition也不会生效——但它在桌面端滚动悬停时，是性能链路的关键一环
滚动期间:hover与 pointer-events 冲突
某些场景下，页面滚动时手指/光标仍在视口内移动，但目标元素因 pointer-events: none（比如为了穿透点击底层地图）或父级 transform 导致坐标系偏移，浏览器会反复尝试匹配:hover目标，引发匹配开销上升。
立即学习“前端免费学习笔记（深入）”；
- 检查是否对滚动容器设置了
transform: translateZ(0)却没配contain: layout paint，这会导致:hover检测区域错位 - 避免在滚动区域的子元素上写
pointer-events: none后又依赖:hover——两者逻辑矛盾，浏览器行为不可预测 - 用
getComputedStyle(el).pointerEvents在控制台快速验证当前生效值
transition 漏写在媒体查询外，以及在滚动容器里混用 pointer-events: none 和交互式伪类。 
