最稳妥方案是仅对color、background-color等具体属性使用transition，避免opacity；css变量需绑定到可过渡属性上，不可直接过渡；移动端应放弃:hover依赖，改用:active或js控制。
hover 时颜色变淡但文字不模糊？用 transition 控制具体属性
直接改 color 或 background-color 是最稳妥的，别碰 opacity——它会让整个元素（包括子元素）一起变透明，文字边缘容易发虚。CSS 变量本身不能被直接过渡，必须通过 transition 绑定到实际被修改的属性上。
常见错误：写成这样：
:root { --nav-bg: #007bff; }
.nav-item { background-color: var(--nav-bg); transition: --nav-bg 0.3s; }
.nav-item:hover { --nav-bg: #0056b3; }
这段代码完全无效：--nav-bg 是自定义属性，浏览器不支持对它做过渡。真正要过渡的是 background-color。
- 只过渡你真正改变的属性，比如
color、background-color、transform - 避免过渡
opacity或box-shadow（尤其带多层阴影时，性能抖动明显） - 加
will-change: transform对高频悬停的导航项有轻微优化，但别滥用
CSS 变量怎么配合 hover 实现主题切换效果？
变量不是为了炫技，是为了解耦样式控制点。比如深色模式下所有导航项统一变灰，只需改一个变量值，而不是逐个覆盖 :hover 规则。
实操要点：
- 把可变样式抽成变量，例如
--nav-hover-bg、--nav-text - 在
:hover中用var(--nav-hover-bg)赋值，而不是硬编码颜色 - 如果要支持 JS 动态切主题，变量定义放在
:root或.dark类里，hover 规则保持不变
示例：
.nav-item {
color: var(--nav-text, #333);
background-color: var(--nav-bg, #f8f9fa);
transition: background-color 0.2s, color 0.2s;
}
.nav-item:hover {
color: var(--nav-hover-text, #fff);
background-color: var(--nav-hover-bg, #007bff);
}
移动端 hover 失效？别依赖 :hover 做核心交互
触摸设备没有“悬停”概念，:hover 在 iOS Safari 和部分安卓浏览器中要么不触发，要么只在点击后短暂生效。这不是 bug，是规范行为。
如果你的导航标签在移动端也需反馈（比如点击高亮），得换思路：
- 用
:active模拟按压态，但注意它只在手指按下瞬间存在 - 更可靠的是加 JS 监听
touchstart/touchend，动态加 class - 或者干脆放弃视觉悬停反馈，改用点击后保持 active 状态（比如当前页导航高亮）
别为了“看起来一致”强行让移动端也跑 :hover，用户感知不到，还可能引发误触或延迟。
transition 时间设多少才不肉也不炸？
0.1s 太快，人眼几乎没感知；0.4s 以上开始觉得拖沓。导航这种高频操作，建议卡在 0.15s–0.25s 区间。
不同属性响应感不同：
-
color/background-color：用0.2s ease-in-out最自然 -
transform: scale()或translateY()：可稍快，0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)更跟手 - 别全写成
all 0.3s——会把本不该动的属性也拉进过渡队列，比如font-size或border-width
过渡曲线选 ease-in-out 就够用，除非你明确需要弹性或缓入效果。
变量和 hover 的组合本身不难，难的是想清楚“哪些该变、哪些不该变、变给谁看”。移动端没 hover，深色模式要复用变量，过渡太长用户着急，太短又像没反应——这些点串起来，才是真实项目里卡住人的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
