:hover 仅纯样式响应，不触发交互；失效主因是 pointer-events: none、无尺寸、被遮挡或不可见；可作用于任何有渲染盒的元素；能通过关系选择器影响兄弟/后代，但无法反向选择父级。
能用 :hover 选中鼠标悬停的元素，但它的行为和你直觉里“选中”可能不太一样——它不触发、不存储、不编程，只是纯样式响应。
为什么 :hover 有时不生效
最常见原因是父元素或自身设置了 pointer-events: none，或者元素没有尺寸（比如空 <div></div>）、被遮挡、或处于不可见状态（display: none 或 visibility: hidden）。
- 检查目标元素是否真实渲染在页面上：用浏览器开发者工具 hover 检查器看是否高亮到正确节点
- 确认没有祖先元素拦截了鼠标事件：
pointer-events: none会向下穿透，但若父级设了pointer-events: auto而子级设了none，子级就收不到:hover -
:hover对<input type="hidden">、<option>等表单控件默认无效，需换思路（如包裹一层可 hover 的容器）
:hover 只能作用于支持交互的元素吗
不是。CSS 规范没限制元素类型，只要它在文档流中、有渲染盒（box），就能响应 :hover。但实际中，像 <span>、<div>、<a> 这些没问题；而 <meta>、<script> 这类无呈现的 HTML 元素自然不会生效。
- 空元素要加
width/height或内容才能被 hover 到 - 行内元素（如
<span>）默认无宽高，hover 区域仅限内容范围，加display: inline-block更可控 - 移动端 Safari 对非
<a>元素的:hover支持滞后（需点击后才激活一次），不能依赖它做核心交互逻辑
怎么让 :hover 影响其他兄弟或后代元素
靠 CSS 关系选择器，不是 JS。关键在结构是否允许“从悬停源出发定位目标”。
立即学习“前端免费学习笔记（深入）”；
- 影响直接后代：
.card:hover .card__title——.card__title必须是.card的子元素（非孙子） - 影响后续兄弟：
.trigger:hover + .target（紧邻）或.trigger:hover ~ .target（任意后续） - 无法反向选择（比如悬停
.child时改变.parent），这种必须用 JS 监听mouseenter/mouseleave - 注意性能：深层嵌套的
:hover（如nav ul li:hover ul li:hover a）在低配设备上可能卡顿
真正容易被忽略的是：hover 状态本身不改变 DOM 结构，也不触发重排（reflow），但频繁切换样式（尤其是涉及 width、height、top、left）仍可能引发重绘（repaint）抖动。如果需要复杂反馈，优先考虑 transform 和 opacity 这类合成属性。
