直接用:hover配合var(--color)可生效，但变量必须在:root或父级作用域定义；:hover内不能仅修改变量值而不重写引用该变量的属性，否则不会触发重绘和过渡，需在:hover块中显式重新声明如background-color: var(--bg)并配transition。
直接用 :hover 配合 var(--color) 就能生效，但变量必须在 :root 或父级作用域里定义好
CSS 自定义属性（即 CSS 变量）本身不支持在 :hover 里“重新声明”并自动级联到子元素的计算值——它只支持继承和运行时重计算。所以关键不是“在 hover 里改变量”，而是让变量本身可被 hover 触发更新，再由其他样式引用它。
常见错误是这样写：
.btn {
--bg: #007bff;
background-color: var(--bg);
}
.btn:hover {
--bg: #0056b3; /* ❌ 这行不会触发 background-color 重算 */
}
实际上，--bg 是改了，但 background-color: var(--bg) 这条声明在初始渲染时已求值完毕，不会自动响应变量变化。必须让使用变量的属性“参与重绘流程”——最可靠的方式是把变量用在支持动态重计算的上下文中，比如：
- 把变量声明在
:root或按钮父容器上，并在:hover中修改该作用域的变量值 - 确保目标样式（如
background-color）直接引用该变量，且未被更具体的静态值覆盖 - 避免在伪类中用
!important覆盖变量引用，否则会切断级联链
transition 必须显式作用于变量所影响的最终属性，不能只写 transition: --bg
CSS 过渡不支持对自定义属性本身做动画（transition: --bg 0.3s 无效），浏览器不识别这种语法。你只能对实际渲染属性过渡，比如 background-color、color、border-color 等。
正确写法是：
.btn {
--bg: #007bff;
background-color: var(--bg);
transition: background-color 0.3s ease;
}
.btn:hover {
--bg: #0056b3;
background-color: var(--bg); /* ✅ 显式重赋值，触发 transition */
}
注意两点：
- 必须在
:hover块里再次写background-color: var(--bg)，不能省略 - 如果用了多个变量（比如
--text和--border），每个对应属性都要单独加transition，或统一用transition: all 0.3s（但慎用，可能意外过渡不需要的属性）
想复用变量又保持主题切换能力？把变量挂到数据属性上更可控
当按钮需要支持深色模式、用户偏好或运行时主题切换时，硬编码在 :root 的变量容易冲突。更健壮的做法是用 data- 属性驱动变量：
.btn[data-theme="primary"] {
--bg: #007bff;
--text: white;
}
.btn[data-theme="primary"]:hover {
--bg: #0056b3;
}
.btn {
background-color: var(--bg);
color: var(--text);
transition: background-color 0.3s, color 0.3s;
}
好处是：
- 不同主题按钮可共存于同一页面，互不影响
- JS 可随时通过
el.setAttribute('data-theme', 'success')切换，变量自动更新 - 避免全局
:root变量被意外覆盖（比如第三方组件也用--bg）
注意：data- 属性值变更会触发重排，但只要变量只用于颜色类属性，性能影响极小。
容易被忽略的兼容性与调试点
CSS 变量在 IE 完全不支持，所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+）都 OK。但有三个细节常被漏掉：
-
var(--missing, fallback)的 fallback 值不能含 CSS 函数（如var(--c, rgb(0,0,0))合法，但var(--c, rgba(var(--r),0,0,1))不合法） - 变量名区分大小写：
--Bg和--bg是两个变量 - 浏览器 DevTools 里查变量值，要打开“Computed”面板，展开“Custom Properties”，不能只看“Styles”里的原始声明
真正难的不是写法，而是变量作用域管理——一个按钮同时被主题、状态、尺寸三套变量控制时，:hover 触发的到底是哪一层变量更新，得靠结构化命名（如 --btn-bg-default / --btn-bg-hover）和清晰的层级约定来兜住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
