:hover没反应需检查三点：元素是否不可交互（需加cursor:pointer或tabindex="0"）、父元素是否设置pointer-events:none、CSS优先级是否不足；颜色渐变须用transition指定属性；背景色卡顿宜改用background-image+opacity；移动端应避免依赖hover，关键功能改用click或:active。
hover 为什么没反应？检查这三点
直接写 :hover 没效果，大概率不是 CSS 写错了，而是元素本身不支持伪类或被覆盖。常见原因有：
<div>、<code><span></span>等默认不可交互元素，需加cursor: pointer或tabindex="0"才能触发 hover（尤其在 Safari 或旧版 Edge）- 父元素设置了
pointer-events: none，子元素 hover 全部失效 - CSS 优先级不够，比如内联样式或更具体的规则（如
.nav a:hover被a:hover覆盖）
颜色渐变要平滑，必须用 transition
只写 color: red; color: blue; 是突变，没有过渡。渐变靠 transition 控制时长和缓动，且必须作用于「被改变的属性」上：
a {
color: #333;
transition: color 0.3s ease; /* 必须指定 color，不能只写 all */
}
a:hover {
color: #007bff;
}注意：transition: all 0.3s 看似省事，但会意外触发重排（如同时影响 margin 或 opacity），拖慢渲染；只声明需要过渡的属性更稳妥。
background-color 渐变容易卡顿？换 background-image
对 background-color 做 transition，在低端设备或复杂布局中可能出现掉帧。真正流畅的背景色渐变，推荐用 background-image: linear-gradient() 配合 opacity 过渡：
立即学习“前端免费学习笔记（深入）”；
.btn {
background-color: #007bff;
transition: opacity 0.25s;
}
.btn::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, #0056b3, #007bff);
opacity: 0;
transition: opacity 0.25s;
}
.btn:hover::before {
opacity: 1;
}本质是两层叠加+透明度切换，GPU 加速更友好，也避开 background-color 在某些浏览器中无法硬件加速的问题。
移动端 hover 不生效？别依赖它
iOS Safari 和 Android Chrome 对 :hover 支持极不稳定：点击后才触发、点透、甚至完全忽略。真实项目里：
- 按钮类交互一律用
:active做按下反馈（transform: scale(0.98)比改色更可靠） - 纯视觉提示（如文字链接变色）可保留 hover，但必须确保无 hover 时信息仍完整可读
- 不要用 hover 触发下拉菜单、工具提示等关键功能——改用 click/tap 事件或 focus-within
hover 是锦上添花，不是功能支柱；渐变动画再顺滑，也救不了误触和盲区。
