:hover仅在指针移入元素边界时激活，不支持键盘焦点或移动端点击后悬停；不可用JS直接触发；受pointer-events、display/visibility遮盖等CSS属性影响；transition需避开display和auto尺寸；嵌套悬停需注意选择器优先级与pointer-events设置；移动端应配合@media(hover:hover)渐进增强，并兼顾:focus可访问性。
伪类 :hover 的基本行为和触发条件
:hover 只在用户将指针（鼠标、触控笔）移入元素**边界内**时激活，不响应键盘焦点或触摸屏的“点击后悬停”（移动端无真正 hover）。它不是事件，不能用 JavaScript 直接触发，也不能通过 element.classList.add() 模拟。
常见误判点：
- 父元素设置了
pointer-events: none→ 子元素无法触发:hover - 元素被
display: none或visibility: hidden遮盖 → 无法悬停 - 使用
transform: scale(0)但未设opacity: 0→ 元素仍占据空间且可悬停
悬停效果中容易失效的 CSS 属性组合
并非所有 CSS 属性都能在 :hover 中平滑过渡。若没配 transition，或属性本身不支持动画，变化会突兀甚至不生效。
必须注意：
立即学习“前端免费学习笔记（深入）”；
-
display不能过渡：从display: none切到block会跳变，应改用opacity+visibility -
height/width设为auto时无法过渡，需用max-height或transform: scaleY() - 字体大小、颜色、背景色、边框、
transform、opacity是安全可过渡属性
button {
opacity: 0.8;
transition: opacity 0.2s ease, transform 0.2s ease;
}
button:hover {
opacity: 1;
transform: translateY(-2px);
}
嵌套悬停与子元素选择器的陷阱
想让父容器悬停时影响子元素？直接写 .parent:hover .child 没问题；但若子元素自身也有 :hover，两者可能冲突或覆盖。
典型问题场景：
- 下拉菜单：父
nav-item:hover .dropdown显示菜单，但菜单内链接a:hover颜色又变 —— 这没问题，是预期行为 - 卡片遮罩层：用
.card:hover .overlay显示遮罩，但遮罩内按钮也需:hover效果 → 必须确保遮罩层没有pointer-events: none - 伪元素悬停：
::before和::after不能单独绑定:hover，只能靠宿主元素触发
移动端兼容性与渐进增强策略
iOS Safari 和 Android Chrome 在触摸设备上对 :hover 支持有限：通常只在第一次点击后临时启用，之后立即失效；部分 WebView 完全忽略。
可靠做法：
- 不要依赖
:hover实现核心功能（比如展开关键操作面板） - 用
@media (hover: hover) and (pointer: fine)包裹纯装饰性 hover 效果 - 需要交互反馈时，优先用
:active或 JS 绑定touchstart/click
@media (hover: hover) and (pointer: fine) {
.icon-button:hover {
transform: rotate(15deg);
}
}
真正难处理的是 hover + 动画 + 焦点管理混合场景——比如键盘用户 Tab 进入按钮时，是否该显示相同效果？这时就得补 :focus 和 :focus-visible，否则可访问性就断了。
