hover背景色变化不生效的主因是transition未写在默认状态而误置:hover中；须在初始样式定义transition，:hover仅设目标值，且避免用all、注意渐变不支持、时长宜选0.2–0.3s、排查pointer-events和z-index遮挡、触摸设备需补充:active或js处理。
hover 背景色变化不生效？检查 transition 是否写对了位置
直接原因往往是 transition 没加在默认状态（非 hover）上，而是只写在 :hover 里。CSS 动画必须定义在初始状态，浏览器才能知道“从哪开始变”。:hover 只负责定义“变成什么样”，不负责“怎么变”。
常见错误写法：
button:hover { background-color: #007bff; transition: background-color 0.3s; }——这样悬停时会立刻变色，移出时却无过渡（回退是突变的）。
-
transition必须写在元素的默认样式块中（比如button或.btn） - 推荐写全属性：
transition: background-color 0.3s ease;，避免只写transition: all 0.3s;（可能意外触发其他属性动画，影响性能） - 如果背景是渐变（
background-image），transition对它无效，得用background-color+ 半透明遮罩等替代方案
transition 时间设太短或太长，用户感知不到变化
0.1s 基本等于没动，0.6s 又让人觉得卡顿。人眼对 200–300ms 的过渡最自然，既明确、又不拖沓。
- 移动端建议不低于
0.2s，触控反馈需要稍强一点的节奏感 - 若同时改多个属性（比如
background-color和transform），别共用一个transition值——它们响应速度不同，容易显得不协调 - 用
ease（默认）比linear更符合直觉；想更轻快可用ease-in-out
hover 在按钮上失效？可能是 pointer-events 或 z-index 搞的鬼
背景色变了但 hover 不触发，大概率不是 CSS 写错了，而是元素被挡住了或禁用了交互。
- 检查父容器是否设置了
pointer-events: none;，子元素会继承（除非显式设为auto） - 确认该元素没有被其他层盖住：用浏览器开发者工具的“元素选择器”点一下，看高亮的是不是你预期的节点
- 如果用了伪元素（如
::before）覆盖整个按钮，记得给它加pointer-events: none;，否则鼠标事件会被它截走
兼容性问题：IE10+ 和老安卓 WebView 需要前缀吗？
现代浏览器（Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+）都原生支持 transition 和 :hover，无需前缀。IE10 是最后一个需要 -ms- 前缀的版本，但它对 transition 的支持其实也不完整（比如不支持 background 简写过渡）。
- 真要兼容 IE10，只对
color、opacity、transform这类稳定属性做过渡，避开background或box-shadow - 安卓 4.4 的 WebView（基于旧版 Blink）有渲染抖动问题，可加
transform: translateZ(0);强制硬件加速来缓解 - 别为兼容性加一堆过时前缀——现在绝大多数项目已不需考虑 IE9 及以下
真正容易被忽略的是：hover 效果在触摸设备上基本不触发（iOS/Android 默认只有点击后短暂激活）。如果交互逻辑依赖 hover，得额外补上 :active 或 JS 的 touchstart 处理——这不是 CSS 能解决的边界问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
