CSS变量本身不可动画，必须将transition绑定到实际渲染属性（如background-color）上，且需在默认状态声明；--hover-bg仅是存储值的容器，改变它不会触发过渡。
为什么直接改CSS变量不触发Hover动画
写了 --hover-bg: #007bff，又在 .btn:hover 里改它，但背景色没过渡——这不是bug，是规范行为。--hover-bg 本身只是个存储容器，浏览器不会对它做动画；真正要动的是被 var(--hover-bg) 调用的属性，比如 background-color。如果你没在基础样式里写 background-color: var(--hover-bg)，那改变量等于白改。
transition 必须绑定到实际渲染属性上
常见错误是这样写：
.btn {
--bg: #007bff;
background-color: var(--bg);
}
.btn:hover {
--bg: #0056b3;
transition: --bg 0.2s; /* 无效！--bg 不可过渡 */
}正确做法是把 transition 放在基础样式里，且指向真实属性：
-
transition: background-color 0.2s（最稳妥） - 或
transition: all 0.2s（但得确保 hover 只改 color/bg/transform 等廉价属性） - 别写
transition: --bg或transition: var(--bg)，语法都不合法
大量Hover状态如何统一维护
当项目有几十个组件都需 hover 变色、变阴影、变文字，靠复制粘贴伪类会失控。核心思路是：把“变化点”抽成变量，让 hover 只负责切换值，不写具体颜色。
立即学习“前端免费学习笔记（深入）”；
- 在
:root或主题类（如.dark）里定义统一变量：--btn-hover-bg、--card-hover-shadow、--link-hover-underline - 所有组件的基础样式都用
var(--xxx)，例如box-shadow: var(--card-hover-shadow) - hover 规则只改变量值，不碰具体样式：
.card:hover { --card-hover-shadow: 0 4px 12px rgba(0,0,0,0.15); } - 切主题时只需换
:root或加 class，所有 hover 效果自动响应
移动端 Hover 的坑和绕过方式
iOS Safari 和多数安卓浏览器里，:hover 在触摸设备上要么不触发，要么只在点击后闪一下——这不是你代码问题，是浏览器故意为之。别试图用 @media (hover: hover) 强行启用，它在很多 WebView 里不可靠。
- 导航类元素：放弃 hover，改用
.nav-item.is-active或 JS 监听touchstart加临时 class - 按钮类元素：保留 hover 作为桌面增强，但核心反馈（如点击压感）必须用
:active或.is-pressed - 绝对不要依赖 hover 实现功能可见性（比如弹出菜单），那会让触摸用户完全卡住
变量能省维护成本，但不能绕过渲染管线限制；真正决定是否重绘的，永远是那个被 var() 调用的属性本身，以及它是否触发 layout 或 paint。
