:hover伪类直接写在目标元素选择器后即可生效，常见失效原因包括选择器不匹配、元素无尺寸或被pointer-events:none拦截、父元素隐藏、css优先级覆盖及移动端hover不可靠。
hover 伪类的基本写法和常见失效原因
直接用 :hover 就能响应鼠标悬停，但很多人写了没反应，多半是因为选择器不匹配或元素不可交互。浏览器只对「可获焦」或「语义上支持交互」的元素（如 <a></a>、<button></button>）默认启用 :hover，而 <div>、<code><span></span> 这类中性元素需要确保它有明确的尺寸、背景或边框，否则悬停区域不可见。
- 必须给元素设置
display、width/height或padding，否则:hover区域为 0 - 父元素设置了
pointer-events: none会阻止所有子元素触发:hover - 使用
transform: translateZ(0)或will-change: transform可能导致部分旧版 Safari 忽略:hover
给非交互元素（如 div）添加 hover 效果的实操要点
想让一个 <div class="card"> 悬停时变色、加阴影，关键不是“能不能”，而是“怎么让它被识别为可悬停目标”。CSS 层面不需要 JS 干预，但 HTML 结构要合理。
<ul>
<li>给 <code>.card 设置 cursor: pointer，既是视觉提示，也暗示用户此处可交互
color 变化——文字颜色在无背景对比下很难察觉，优先改 background-color、box-shadow 或 transform
.card { transition: background-color 0.2s ease; }，而不是只写在 :hover 里.card {
padding: 16px;
background-color: #f8f9fa;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
background-color: #e9ecef;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
嵌套元素 hover 的作用范围与陷阱
当在 .nav-item 上写 :hover，但想影响其子元素 .dropdown，不能直接写 .nav-item:hover .dropdown —— 这没问题；但若 .dropdown 是绝对定位且脱离文档流，悬停移出 .nav-item 瞬间就会消失，造成闪烁。这不是 CSS 写错了，是交互逻辑断层。
- 给
.nav-item和.dropdown之间留出「悬停缓冲区」：用margin-bottom或padding-bottom延伸热区 - 如果用
opacity控制显示/隐藏，记得同时设pointer-events: none在隐藏态，否则仍会拦截鼠标事件 - 移动端没有 hover，
:hover在触摸设备上仅在模拟点击后短暂触发（iOS Safari），不能当作点击替代方案
兼容性与性能提醒：哪些 hover 不该乱用
:hover 本身兼容性极好（IE6+），但组合用法容易翻车。比如 body:hover .menu 在某些安卓 WebView 下不生效；又比如高频触发的 :hover 配合 transform + filter，可能在低端机上卡顿。
- 避免在
:hover中修改height、width或margin—— 会触发重排（reflow），比transform和opacity开销大得多 - 不要用
:hover模拟下拉菜单的「始终展开」逻辑，应结合:focus-within或 JS 控制aria-expanded - CSS-in-JS 库（如 styled-components）里写
&:hover没问题，但若组件被React.memo浅比较拦住，样式更新可能延迟一帧
真正难的不是写出 hover，是判断这个交互是否该由 hover 承担——比如表单校验提示、操作确认弹窗、导航菜单展开，这些场景 hover 往往只是临时补丁，背后该补的是焦点管理与可访问性逻辑。
