:hover不生效的常见原因包括：选择器空格误用（如li :hover被解析为后代选择器）、pointer-events:none拦截鼠标事件、层叠上下文遮挡、display:none隐藏元素、CSS优先级覆盖及移动端悬停策略限制。
:hover 伪类选择器本身就能实现鼠标悬停效果，但实际用时容易忽略浏览器默认行为、层叠顺序和可访问性影响。
为什么 :hover 有时不生效？
常见原因不是写法错，而是 CSS 优先级或元素状态被覆盖：
- 目标元素被
display: none或visibility: hidden隐藏时，:hover不触发（visibility: hidden的元素仍可触发，但视觉不可见） - 父元素设置了
pointer-events: none，子元素所有鼠标事件（包括:hover）都会被拦截 - 使用了
!important强制覆盖了:hover样式，或后续规则覆盖了悬停样式 - 在移动端 Safari 上，
:hover可能只在第一次触摸后才激活，且不会持续生效（这是浏览器策略，非 bug）
:hover 能作用在哪些元素上？
它不限于 <a> 或按钮——任何可渲染的元素都支持，但语义和交互预期很重要：
-
<div>、<span>、<li>等常规容器均可直接加:hover - 表单控件如
<input type="text">和<button>默认有浏览器内置悬停反馈，自定义时需重置outline和border - 伪元素
::before和::after也能响应父元素的:hover（例如button:hover::after），但不能直接写::before:hover（语法非法） - 慎用于纯文本节点（如
<p>文字</p>内的裸文本），因无明确交互边界，易造成误触或可访问性问题
如何避免悬停样式“闪动”或过渡生硬？
直接改 background-color 或 color 容易跳变，加 transition 是必须项，但要注意属性粒度：
立即学习“前端免费学习笔记（深入）”；
- 写
transition: all 0.2s ease;看似省事，但可能意外动画未预期属性（比如box-shadow模糊半径变化引发重绘） - 推荐显式声明：
transition: background-color 0.2s, color 0.2s, transform 0.2s; - 对
transform悬停（如scale(1.05)），务必加上will-change: transform;（仅在必要时），否则滚动中可能卡顿 - 避免在
:hover中修改height、width或margin—— 这些会触发布局重排（layout thrashing），比transform或opacity开销高得多
真正难的不是写 a:hover { color: red; }，而是判断这个悬停是否该存在、是否对键盘用户友好（比如配合 :focus）、以及是否在 touch 设备上有降级方案。这些细节不报错，但一上线就暴露。
