直接修改:hover中的CSS变量无效，因变量需被实际属性（如background-color）引用才会触发重绘；必须在:hover中同时更新变量值和使用该变量的属性，并将transition定义在基础选择器中。
为什么直接改 :hover 里的 CSS 变量没反应
因为 CSS 变量（--color-bg 这类）本身不会触发重绘，除非它被实际用在某个会影响渲染的属性上。如果你只在 :hover 里修改变量值，但没在后续规则中用到它，浏览器根本不会重新计算样式。
常见错误写法：
.card {
--bg-color: #f8f9fa;
}
.card:hover {
--bg-color: #e9ecef; /* 这行单独存在，无效 */
}必须配合 background-color 或其他属性一起使用才生效：
- 变量定义和使用要分离：先定义，再通过
var(--bg-color)引入到具体属性 - 所有依赖该变量的属性（如
background-color、border-color）都得写在同一个选择器或继承链里 - 不要指望只改变量值就能“自动刷新”样式——变量不是响应式数据，它只是值的占位符
卡片悬浮切换最简可行写法
核心是把变量声明和使用拆开，让 :hover 同时覆盖变量值和消费它的属性：
立即学习“前端免费学习笔记（深入）”；
.card {
--bg-color: #f8f9fa;
background-color: var(--bg-color);
transition: background-color 0.2s ease;
}
.card:hover {
--bg-color: #e9ecef;
background-color: var(--bg-color);
}这样写能生效，是因为 :hover 中显式设置了 background-color，而它的值又来自刚更新的变量。关键点：
-
transition必须写在基础状态（.card），不能只写在:hover - 如果还用了
border、box-shadow等，也得一并写进:hover块里，不能只靠变量驱动 - 变量名建议带语义前缀，比如
--card-bg-hover比--bg-color更易维护
用 :is() 批量控制多套卡片主题的悬浮色
当项目里有 light/dark/primary 多种卡片变体时，重复写 hover 规则很冗余。可以用 :is() + 统一变量名来收敛逻辑：
.card.is-light {
--card-bg: #fff;
--card-bg-hover: #f5f5f5;
}
.card.is-dark {
--card-bg: #212529;
--card-bg-hover: #343a40;
}
.card {
background-color: var(--card-bg);
transition: background-color 0.2s ease;
}
.card:is(.is-light, .is-dark):hover {
background-color: var(--card-bg-hover);
}注意点：
-
:is()兼容性从 Chrome 100+/Firefox 100+/Safari 15.4 起支持；若需兼容旧版，改用逗号分隔的选择器 - 变量命名必须一致（
--card-bg-hover），否则var(--card-bg-hover)查不到值 - 不推荐在
:is()里写变量赋值，只用于匹配和消费——赋值仍应放在具体主题 class 内
悬停动画卡顿？检查变量是否触发了 layout
如果发现 background-color 切换有卡顿，大概率是卡片内部内容触发了 layout（比如文字重排、图片加载、字体回退）。CSS 变量本身不导致卡顿，但间接影响可能被忽略：
- 避免在
:hover中修改height、width、padding等会触发布局的属性 - 确保
transition只作用于background-color和transform这类合成属性 - 如果用了
box-shadow，尽量用固定尺寸（如0 2px 4px rgba(0,0,0,0.1)），别依赖变量动态算大小
真正需要快速切换的，是颜色、透明度、位移这三类；其它任何涉及尺寸或布局的变动，都不适合靠变量“一键切换”。
