:hover 不响应css变量更新，因其不监听自定义属性变化；需通过forceredraw（如切换class+offsetheight）或@media(hover:hover)触发重计算以获取新变量值。
hover态不响应CSS变量更新？因为伪类不触发重绘
直接说结论：:hover 本身不会监听 --color-primary 这类自定义属性的变化，改了变量值，已渲染的 hover 效果不会自动刷新。浏览器只在用户真实悬停时重新计算一次伪类样式，不会“订阅”变量变更。
常见错误现象：document.documentElement.style.setProperty('--color-primary', '#ff6b6b') 执行后，按钮正常态颜色变了，但鼠标移上去那一瞬间还是旧色 —— 不是没生效，是 hover 样式缓存了旧变量快照。
- 必须让 hover 规则「感知」变量变化，最可靠方式是强制重置伪类匹配逻辑
- 不要依赖 JS 改变量后“等它自己反应”，得主动干预渲染链
- 部分浏览器（如旧版 Safari）对
:hover+ CSS 变量组合的支持更弱，建议加兜底
用 forceRedraw 触发 hover 重计算（最简可行方案）
核心思路：改完 CSS 变量后，短暂移除再恢复按钮的 class 或 style，让浏览器重新走一遍选择器匹配流程，从而拉取新变量值用于 :hover。
实操建议：
- 给按钮加一个稳定 class，比如
btn-action，hover 样式写在.btn-action:hover下 - JS 更新变量后，立刻执行：
btn.classList.remove('btn-action'); btn.offsetHeight; btn.classList.add('btn-action'); -
offsetHeight是关键——它强制触发回流，让样式系统重新评估所有规则 - 避免用
display: none切换，会丢失悬停状态，用户可能正悬停着就闪一下
示例片段：
button {
background-color: var(--color-primary, #007bff);
}
button:hover {
background-color: var(--color-primary-hover, #0056b3);
}
用 @media (hover: hover) 隔离 hover 样式（兼容性兜底）
某些场景下（比如主题切换后用户还没悬停），你希望 hover 态“从第一次悬停起就用新变量”。这时单纯 forceRedraw 不够，因为用户可能一直没移入过。
解决方案是把 hover 样式抽到媒体查询里，利用其动态重评估特性：
@media (hover: hover) { .btn:hover { background-color: var(--color-primary-hover); } }- 该媒体查询在变量更新后会被浏览器重新检查，从而拉取新值
- 注意：IE 不支持，需配合
Modernizr或降级为 class 切换 - 别滥用——每个 hover 规则都包一层 media 会增加 CSS 复杂度，只在主题频繁切换的组件里用
为什么不用 element.matches(':hover') 检测并手动触发？
有人想用 JS 主动判断是否悬停，再 setStyle。这不可行：
-
matches(':hover')在非悬停时永远返回false，无法预判 - 没有 API 能“模拟悬停”或“注入伪类状态”，这是浏览器内核隔离的设计
- 试图用
dispatchEvent(new MouseEvent('mouseover'))不会触发:hover计算，只触发 JS 事件 - 真正要干预的是样式系统，不是事件系统 —— 所以回到 forceRedraw 或 media query 更直接
复杂点在于：hover 态本质是渲染时快照，不是实时绑定。变量变，样式树不变，除非你逼它重跑一次匹配逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
