:hover不生效主因是权重不足、被覆盖、元素不可交互或伪类顺序错误；需确保元素有cursor:pointer、:hover写在常规样式后、遵循LVHA顺序，并避免在移动端单独依赖。
hover 样式不生效的常见原因
直接写 :hover 却没反应，大概率不是语法错，而是被其他规则覆盖、选择器权重不够，或元素本身不支持交互状态。CSS 的 :hover 只对「可交互元素」默认生效（如 <a></a>、<button></button>），普通 <div> 或 <code><span></span> 在某些浏览器（尤其是旧版 Safari 和部分移动端 WebView）中可能不会触发，除非显式设置 cursor: pointer 或 pointer-events: auto。
-
:hover规则必须写在对应元素的常规样式之后，否则会被覆盖 - 父元素设置了
pointer-events: none，会阻止所有子元素的 hover 事件传递 - 使用了
!important强制覆盖 hover 样式，但未在 hover 规则里也加!important - 元素是 disabled 状态（如
<button disabled></button>），此时:hover不触发
确保 hover 生效的最小可行写法
不要依赖默认行为。对非交互语义元素（比如 <div class="card">），主动声明可响应：
<pre class="brush:php;toolbar:false;">.card {
cursor: pointer;
background-color: #f5f5f5;
}
.card:hover {
background-color: #e0e0e0;
}</pre>
<p>关键点：</p>
<ul>
<li>
<code>cursor: pointer 不仅改光标，还向浏览器表明该元素“有意图响应悬停”，提升兼容性
div:hover），优先用类名精确控制position: absolute 覆盖层，检查是否挡住了鼠标事件——可加 pointer-events: none 到遮罩层伪类顺序影响 hover 是否可用
CSS 中 :link、:visited、:hover、:active 的书写顺序必须是 LVHA（LoVe HAte），否则 :hover 可能被前面的规则压制。即使你只写 :hover 和 :active，也要注意它们的相对位置：
立即学习“前端免费学习笔记（深入）”；
a {
color: blue;
}
a:hover {
color: red;
}
a:active {
color: orange;
}
如果把 a:active 写在 a:hover 前面，且两者修改同一属性，:hover 就可能失效——因为后声明的规则优先级更高（同权重下，后出现者胜）。
移动端 hover 的特殊处理
多数触摸设备没有真正意义上的「悬停」，iOS Safari 和 Android Chrome 在点击前会模拟一次 hover（称为「hover 透传」），但仅限于有 cursor: pointer 或监听了 click 事件的元素。纯靠 :hover 实现交互反馈，在手机上基本不可靠。
- 不要依赖
:hover做关键功能提示（比如隐藏菜单只靠 hover 展开） - 需要触控友好时，用
@media (hover: hover) and (pointer: fine)区分精细指针设备 - 更稳妥的做法：用 JavaScript 监听
touchstart+mouseenter，统一触发类名切换
hover 不是失效，而是它本就只承诺「当用户意图悬停时尽可能响应」。真实项目里，别把它当开关用，而要当作增强体验的一层渐进式提示——能触发最好，不能也不该破坏基础功能。
