:hover里改css变量没效果是因为变量本身不可动画，必须在基础样式中通过var()显式调用变量，且transition需作用于真实属性（如background-color）而非变量名。

为什么:hover里改CSS变量没效果

因为变量本身不可动画，--hover-bg只是个“记事本”，浏览器不会对它做过渡或重绘。真正要动的是被var(--hover-bg)调用的属性，比如background-color。如果你的基础样式里没写background-color: var(--hover-bg)，那改再多次变量也白搭。

必须在基础样式中显式调用var()

hover生效的前提是：目标属性已在默认状态中通过var()绑定该变量。常见错误写法：

• .btn { --bg: #007bff; } → 只声明，没调用，无效
• .btn { background-color: #007bff; } → 硬编码，和变量无关
• .btn { background-color: var(--bg); } → ✅ 正确起点

之后.btn:hover { --bg: #0056b3; }才能让背景色真正变化。

transition必须写在基础样式里，且指向真实属性

过渡不能作用于变量名，只能作用于渲染属性。以下写法全部非法：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• transition: --bg 0.2s → --bg不是可过渡属性
• transition: var(--bg) 0.2s → 语法错误
• .btn:hover { transition: background-color 0.2s; } → 太晚，hover触发时才加transition，动画可能跳帧

正确做法：.btn { transition: background-color 0.2s ease; }，然后靠var(--bg)驱动值变更。

局部覆盖要靠容器选择器重声明，不是靠:hover伪类

button:hover { --text-color: red; }这种写法看似合理，但--text-color只对button:hover::before这类伪元素自身生效，不会影响button span等子元素——因为变量作用域由声明位置决定，不是由伪类触发时机决定。

真正可控的做法是：

• 把变量声明在容器上：.card { --text-color: #222; }
• 用更具体的选择器覆盖：.card.warning { --text-color: #d32f2f; }
• hover只负责切换这个已声明的容器类：.card:hover { --text-color: #007bff; }（前提是.card已声明--text-color）

否则你永远在调试“为什么鼠标移上去颜色不动”，而不是“为什么变量没继承下来”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！