CSS变量控制卡片悬停需在卡片或祖先上定义--card-bg等变量，:hover中引用并配合transition实现动画；主题切换通过body[data-theme]动态更新变量值，确保作用域覆盖且无局部覆盖。
卡片悬停时怎么用 CSS 变量控制颜色和阴影？
直接改 :hover 里的硬编码值当然能实现悬浮效果，但一旦要批量调整、主题切换或运行时换肤，就得反复改多处样式。CSS 变量真正有用的地方，是把「可变部分」抽出来集中管理，再通过选择器作用域动态注入。
关键不是“能不能用”，而是变量声明的位置是否覆盖到 :hover 规则内——很多失败案例其实是变量在 :root 声明了，但被组件级选择器的局部作用域覆盖或未继承。
-
--card-bg和--card-shadow必须在卡片元素或其祖先上定义（比如.card { --card-bg: #fff; }），不能只靠:root；否则.card:hover里读不到变化后的值 - 阴影推荐用
box-shadow: var(--card-shadow, 0 2px 8px rgba(0,0,0,0.1))，留默认值防变量未定义时样式崩塌 - 颜色过渡必须显式写在非 hover 状态里：
.card { background: var(--card-bg); transition: background 0.2s, box-shadow 0.2s; }，否则变量变了但没动画
如何让同一套卡片支持亮色/暗色主题切换？
主题切换本质是批量更新一组变量值，而不是重写整套 CSS。难点在于：变量更新后，所有已渲染的卡片能否实时响应？答案是能，但前提是变量作用域正确且没有被更具体的选择器覆盖。
典型结构是给 加类名，再用该类名限定变量作用域：
body[data-theme="dark"] .card {
--card-bg: #1e1e1e;
--card-shadow: 0 4px 12px rgba(0,0,0,0.3);
--card-hover-bg: #2d2d2d;
}
.card {
background: var(--card-bg);
box-shadow: var(--card-shadow);
transition: background 0.25s, box-shadow 0.25s;
}
.card:hover {
background: var(--card-hover-bg, #f0f0f0);
box-shadow: var(--card-shadow-hover, 0 6px 16px rgba(0,0,0,0.25));
}
- 不要在
:root里写死主题变量，否则切换时要 JS 批量改document.documentElement.style，性能差且难维护 -
--card-hover-bg和--card-shadow-hover是独立变量，方便单独调控悬停态，不依赖主变量推导 - JS 切换主题只需
document.body.setAttribute('data-theme', 'dark')，无需操作每个卡片元素
为什么 hover 动画卡顿或不触发？
常见原因不是变量本身的问题，而是变量更新与 CSS 引擎渲染节奏不匹配，或者过渡属性没对齐。
- 变量值是字符串，如果
--card-bg被设为"#333"（带引号），浏览器会当无效值处理，导致悬停时背景突然跳变而非过渡 -
transition必须写在常态规则里（.card），不能只写在.card:hover；否则第一次 hover 会无动画 - 避免在变量中拼接单位，比如
--gap: "12px"—— 应该写--gap: 12px（无引号），否则margin: var(--gap)会失效 - 阴影参数顺序敏感：
var(--card-shadow)输出必须是完整0 2px 4px rgba(...)字符串，不能只给模糊值
JS 动态修改变量影响卡片悬停吗？
能影响，但要注意时机和粒度。直接改 document.documentElement.style.setProperty('--card-bg', '#ff6b6b') 会让所有用到该变量的卡片立刻重绘，包括它们的 hover 态——前提是这些卡片没用自己的局部变量覆盖。
- 若卡片组件内部写了
.card { --card-bg: #fff; }，那么改:root的同名变量就无效 - 想单个卡片定制，应该用
element.style.setProperty('--card-bg', ...)，这样只影响该元素及其子元素 - 频繁 JS 修改变量可能触发重排，建议用
requestAnimationFrame批量合并，或改用 CSS 自定义属性配合@property（需检查浏览器支持）
变量不是魔法，它只是把值的来源从静态 CSS 搬到了运行时可写的存储区。真正决定悬停是否顺滑的，还是 transition 属性是否生效、变量是否被正确继承、以及有没有意外的层叠覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
