hover伪类不生效主因是pointer-events:none、元素被遮挡、触摸设备无悬停、伪元素误用、display/opacity异常、overflow隐藏导致hit-test失败、动态插入时样式未加载或权重不足；transition需属性可动画且声明正确，避免all，注意值类型一致和移动端:active替代。
hover 伪类不生效的常见原因
最常见的情况是父容器或自身设置了 pointer-events: none，或者元素被其他层遮挡（z-index 太低、透明度为 0、visibility: hidden）。另外，:hover 只对鼠标悬停有效，触摸设备默认不触发（除非模拟 hover 的 UA 行为），这点容易被忽略。
检查是否误用了伪元素：比如写成 li::before:hover —— 这是非法语法，伪元素本身不能绑定 :hover，只能对宿主元素（如 li:hover::before）使用。
- 确保目标元素是可交互的：
display不为none，opacity≥ 0.01，且没有disabled属性（对<li>无效，但若用<button></button>包裹则需注意） - 避免在父级上设置
overflow: hidden且子元素有负 margin 或 transform 移出边界，导致 hit-test 失败 - 如果列表项是通过 JS 动态插入的，确认 CSS 规则已加载，且选择器权重没被更高优先级规则覆盖（可用浏览器开发者工具的“Computed”面板看
:hover是否被禁用）
transition 不过渡、跳变或延迟异常
transition 要生效，必须同时满足两个条件：属性值可动画 + 声明了正确的过渡属性。例如只写 transition: all 0.3s 很危险——很多属性（如 display、height 从 0 到 auto）根本无法过渡，会直接跳变。
常见错误是给 color 加了 transition，但 hover 时改的是 background-color，结果什么都没动。
立即学习“前端免费学习笔记（深入）”；
- 只对需要动画的属性单独声明：
transition: color 0.2s, background-color 0.2s, transform 0.2s - 避免用
all，尤其在复杂列表中可能引发重排/重绘性能问题 - 确保初始状态和 hover 状态的值类型一致：比如
transform: translateX(0)→transform: translateX(10px)可过渡；但transform: none→translateX(10px)在部分旧浏览器中可能不触发 - 如果用了
will-change: transform，记得 hover 后也保持该属性（或用 JS 切换），否则过渡可能卡顿
移动端 touch 设备下 hover 失效怎么办
CSS :hover 在 iOS Safari 和 Android Chrome 中默认仅在“模拟桌面模式”或首次点击后短暂触发（即“伪 hover”），并非真正持续悬停。这不是 bug，而是规范行为。
真需求是“点击高亮”？那就别依赖 :hover，改用 :active 或 JS 添加临时 class：
li {
transition: background-color 0.15s;
}
li:active {
background-color: #e0e0e0;
}
/* 或配合 JS */
li.touch-active {
background-color: #e0e0e0;
}- 不要用
@media (hover: hover)来包裹 hover 样式——它只判断设备能力，不解决触控无 hover 的本质 - 若必须视觉反馈，优先用
:active，并确保touch-action: manipulation已设（减少 300ms 延迟） - 避免在移动端强行启用 hover（如用
cursor: pointer+:hover），既无效又误导用户
嵌套列表或 flex/grid 布局中 hover 错位
当 li 内部有 display: flex 或 grid，且子元素设置了 margin、gap 或 align-items: center，hover 区域可能和视觉内容不一致——比如文字居中但点击边缘才触发。
根本原因是：hover 检测基于元素的 border box，而视觉内容可能被内边距、对齐方式“推离”实际热区。
- 给
li加padding替代子元素的margin，扩大可触发区域 - 若用
flex，确保li本身高度足够（避免height: 0或min-height未设） - 检查是否有
line-height过小导致文字“挤”在顶部，让底部留白不可点 - 用开发者工具的“Toggle element screenshot”功能查看实际 hit-area 是否覆盖预期区域
CSS 的 :hover 和 transition 看似简单，但失效时往往卡在细节：属性是否可动画、热区是否真实存在、设备能力是否匹配。调试时先关掉所有 fancy 效果，用纯色背景 + 边框确认 hover 区域，再一层层加回来。
