CSS变量在:hover中修改无效，是因为变量本身不触发动画，必须在:hover中显式重写background-color: var(--bg)并配合基础选择器中的transition声明才能生效。
button:hover里改CSS变量为什么没反应
因为--color这类自定义属性本身不能直接触发动画，浏览器不会监听变量值变化去重绘background-color: var(--color)。你改了变量，但引用它的那条样式已经计算完了，不会自动更新。
必须让最终渲染属性（比如background-color）参与过渡流程。常见错误写法：
.btn { --bg: #007bff; background-color: var(--bg); }
.btn:hover { --bg: #0056b3; /* ❌ 这行无效 */ }- 变量得定义在
:root或按钮父级作用域，确保可被继承 -
:hover块里必须显式重写background-color: var(--bg)，不能只改变量 -
transition只能作用于实际属性，如background-color，写transition: --bg完全无效
transition要写在哪个选择器上才生效
必须写在**基础状态**的选择器里，也就是按钮默认样式所在规则中。写在:hover或:active里不起作用。
正确示例：
立即学习“前端免费学习笔记（深入）”；
.btn {
--bg: #4A90E2;
background-color: var(--bg);
transition: background-color 0.3s ease;
}
.btn:hover {
--bg: #1E5799;
background-color: var(--bg); /* 必须重写这一行 */
}- 过渡时间、缓动函数都绑定在基础规则，不是悬停规则
- 如果同时想过渡多个属性，比如
background-color和color，就写transition: background-color 0.3s, color 0.3s - 别用
transition: all——它会把不支持动画的属性（如display）也拖进来，导致意外行为
怎么让点击态（:active）和悬停态（:hover）过渡不打架
三态共存时，:active优先级高于:hover，但过渡逻辑容易冲突：比如:hover设了0.3s渐变，:active又想立刻变色，结果释放时却卡顿。
解法是分层控制：
- 给
:hover配transition，实现平滑进入 - 给
:active单独设transition: none或transition-duration: 0s，让它瞬间生效 - 但注意：
:active里的transition: none只影响进入，不影响离开——释放时仍按基础规则的transition回退 - 如果需要释放时也不同速，就得用JS切换类名，避开伪类优先级纠缠
渐变背景按钮还能用transition吗
能，但限制多。CSS background-image中的线性渐变（linear-gradient）**无法直接过渡**，浏览器不支持两个渐变之间的插值动画。
可行方案只有两种：
- 用
background-color过渡打底，再叠加一层半透明渐变遮罩，靠颜色变化“模拟”渐变流动感 - 用
@keyframes+animation替代transition，在:hover里触发帧动画，但失去鼠标移出时的反向过渡 - 若真要双向渐变动效，得用
mask或clip-path配合background-position位移，代价是兼容性和维护成本明显升高
真正无缝的变色，还是老实用纯色+background-color过渡最稳。渐变是视觉增强项，不是过渡友好型属性。
