:hover不生效需先检查三件事：元素是否具备可悬停尺寸、是否被display:none或visibility:hidden禁用、移动端是否缺乏首次点击激活；transition须写在常态规则中且属性需两端定义；语义化元素表现差异及复杂交互需JS补位。
hover 伪类不生效？先检查这三件事
绝大多数 :hover 失效不是写法错，而是被更基础的条件卡住了。
- 元素必须是「可交互」或「被浏览器视为可悬停」的——
<div>、<span>默认可以，但若它没有尺寸（比如子元素全position: absolute且父级没设height），那鼠标其实没真正“悬停”到它身上 -
:hover不作用于display: none元素，也不作用于visibility: hidden的后代（但作用于visibility: hidden自身） - 移动端 Safari 和部分安卓 WebView 默认不触发
:hover，除非用户真点过一次屏幕（iOS 会模拟一次“激活”），所以纯靠:hover做关键功能会有体验断层
CSS 中 hover 配合 transition 的典型写法陷阱
想让悬停有淡入/滑动效果，很多人直接给 :hover 加 transition，结果动画只在进入时有、离开时消失得突兀。
-
transition必须写在「常态规则」里，不是只写在:hover里——否则离开时没有过渡 - 要过渡的属性必须在常态和
:hover状态下都存在（比如常态设opacity: 1，:hover设opacity: 0.6；如果常态没写opacity，那它默认是1，但部分浏览器可能不触发过渡） - 慎用
transition: all——它会让所有可动画属性都参与过渡，包括你没意识到的box-shadow、transform，导致意外卡顿或闪烁
推荐写法：
button { opacity: 1; transition: opacity 0.2s ease, transform 0.2s ease; }<br>button:hover { opacity: 0.8; transform: translateY(-2px); }
hover 在按钮、链接、卡片上的常见适配差异
不同语义化元素对 :hover 的响应逻辑一致，但实际表现受默认样式和可访问性约束影响很大。
立即学习“前端免费学习笔记（深入）”；
-
<a>标签天然支持:hover，但若加了pointer-events: none（比如为了禁用点击），:hover也会失效 -
<button>在 Firefox 中，若设user-select: none，可能影响:hover响应灵敏度（尤其快速进出时） - 卡片类容器（如
<article>或带role="region"的<div>）建议加cursor: pointer，否则用户无法直观感知可悬停——这不是规范要求，但关乎真实可用性
需要 JavaScript 补位的 hover 场景
纯 CSS :hover 解决不了延迟响应、条件判断、或跨元素联动（比如悬停 A 时高亮 B）。
- 移动端需模拟 hover 效果时，别用
ontouchstart直接切状态——会导致点击穿透或连点误判；推荐用touchend后加setTimeout延迟移除，或监听pointerdown/pointerup - 要实现「悬停 300ms 后才触发动画」，CSS 没有原生 delay-on-hover，必须用 JS 监听
mouseenter启动计时器，mouseleave清除 - 当父容器用了
overflow: hidden且子元素悬停后伸展超出边界，CSS 无法自动扩大父容器——这时得 JS 测量并临时改height或切 class
复杂交互里，hover 往往只是触发信号，真正干活的还是 JS。别硬扛，该交出去就交出去。
