:hover不生效的首要原因是选择器未匹配目标元素，如类名错误、元素被隐藏；其次需检查优先级、设备兼容性、过渡声明、可访问性支持及动画性能优化。
hover 伪类写不生效？先检查选择器是否匹配元素
最常见的现象是 CSS 写了 :hover，但鼠标移上去完全没反应。根本原因往往不是语法错，而是选择器压根没选中目标元素——比如给 <div class="btn"> 写了 <code>.button:hover，类名对不上；或者元素被 display: none 或 visibility: hidden 隐藏了，:hover 就不会触发。
实操建议：
- 用浏览器开发者工具（F12）右键检查目标元素，确认实际类名、结构层级和当前样式状态
- 确保 hover 规则的优先级不低于基础样式，必要时加
!important仅用于调试，别留在线上 -
:hover只对鼠标悬停有效，触摸设备（如手机）默认不触发，不要依赖它做核心交互逻辑
hover 要作用在子元素上？用空格后代选择器而不是 > 子选择器
想让父容器悬停时，改变内部图标颜色，写成 .card > .icon:hover 是错的——这表示“只当 .icon 自己被悬停才生效”。正确做法是把 :hover 放在父选择器上，再通过空格连接子元素，例如 .card:hover .icon。
常见错误场景：
立即学习“前端免费学习笔记（深入）”；
- 误用
.nav-item:hover > .dropdown导致下拉菜单闪退：鼠标一离开.nav-item就失活，中间没留过渡空间 - 响应式中媒体查询内漏写
:hover规则，导致桌面端有效、移动端失效（其实移动端本就不该依赖 hover） - 动画属性如
transform、opacity在:hover中直接写，但没加transition声明，结果变成突变而非平滑过渡
hover 和 focus 同时需要？别只写 hover，记得补充 :focus-within 或 :focus
可访问性要求下，键盘用户 Tab 到按钮时，也得有视觉反馈。只写 button:hover 不够，必须加上 button:focus，否则键盘操作时毫无提示。
更复杂的情况：
- 下拉菜单容器需支持鼠标悬停展开 + 键盘聚焦展开：用
.menu:hover, .menu:focus-within -
:focus-within兼容性要注意——IE 完全不支持，Safari 15.4+ 才稳定，旧项目可用 JS 模拟或降级为:focus+tabindex - 避免
:hover和:focus样式冲突，比如一个设了outline: none，另一个又设了outline: 2px solid blue，结果焦点态被覆盖
hover 动画卡顿？优先用 transform 和 opacity，避开重排
用 :hover { width: 200px; height: 200px; } 这类会触发 layout（重排）的属性，容易造成卡顿，尤其在低端设备或复杂 DOM 下。
性能优化要点：
- 只对
transform、opacity、filter做 hover 动画，它们走合成层（compositor），不触发重排重绘 - 显式声明
transition: transform 0.2s ease, opacity 0.2s ease，别用all，防止意外过渡其他属性 - 移动端慎用 hover 动画：iOS Safari 在非
<a></a>或带cursor: pointer的元素上，hover 可能延迟触发甚至不触发
hover 看似简单，但真正用稳，得同时盯住选择器有效性、可访问性补全、动画性能和跨设备行为——漏掉任意一点，都可能在某个用户场景里突然失效。
