CSS变量更新后:hover动画不更新，因浏览器懒触发样式重算，仅在鼠标移入时读取变量快照；calc()混用、旧浏览器不支持动态变量、未触发hover状态均会导致失效。
为什么直接改 CSS 变量后 :hover 动画不更新
因为浏览器对 :hover 的样式计算是“懒触发”的：只在鼠标真正移入/移出时重新求值一次，不会监听 --offset-x 这类自定义属性的变化。你执行 document.documentElement.style.setProperty('--offset-x', '20px') 后，已渲染的 button:hover::after 仍用旧的偏移快照，动画起点卡死不动。
transition 不生效？检查是否用了 transform + calc() 混合写法
常见错误是把偏移逻辑写成 transform: translateX(calc(var(--offset-x) * -1)) —— 这种写法在多数浏览器中无法被 transition 捕获，因为 calc() 内部变量变更不触发重绘。必须拆开：
- 用
transform: translateX(var(--offset-x))（纯变量） - 或改用
left: var(--offset-x)配合transition: left 0.3s - 若必须用
calc()，得配合will-change: transform提前告知浏览器
如何让 hover 动画响应主题切换后的变量更新
用户切换深色模式后，按钮悬停动画仍从旧位置出发？关键不是重绘元素，而是重置伪类匹配链。最稳做法：
- 给按钮加一个稳定 class，比如
btn-animated - JS 更新变量后立刻执行：
btn.classList.remove('btn-animated'); btn.offsetHeight; btn.classList.add('btn-animated'); -
offsetHeight强制回流，让.btn-animated:hover::after重新读取--offset-x当前值 - 避免用
display: none或visibility: hidden切换，会中断悬停状态
IE 和旧 Safari 下 :hover + 变量动画彻底失效怎么办
这些浏览器根本不支持在伪类中读取动态变量值，button:hover { transform: translateX(var(--offset-x)) } 直接退化为无动画。兜底方案只有两个：
立即学习“前端免费学习笔记（深入）”；
- 用
@media (hover: hover)包一层，利用媒体查询的重评估机制（注意 IE 完全不支持） - 放弃变量驱动，改用 class 切换：
btn.classList.toggle('hover-offset-20')，再写死.hover-offset-20:hover::after { transform: translateX(-20px); }
真正难处理的是“变量改了、用户还没 hover 过”的场景——forceRedraw 对未触发过的悬停无效，必须靠媒体查询或 class 主动接管。
