:hover伪类必须配合其他选择器使用，不能单独书写；仅对可交互元素默认生效，需配合cursor或tabindex扩展；应与transition搭配实现平滑效果，且transition须写在非hover规则中。
hover 伪类必须配合其他选择器使用
单独写 :hover 没有效果，它不是独立样式规则，而是状态修饰符。浏览器需要知道“谁被悬停”才能应用样式。
常见错误是直接写：
hover { color: red; }
这会报错或完全无效。正确写法必须前置一个选择器，比如：
-
a:hover控制链接悬停 -
.btn:hover控制按钮类元素悬停 -
div#menu li:hover控制菜单项悬停
hover 只作用于可交互元素（但可以扩展）
默认情况下，:hover 在桌面端只对 <a>、<button>、<input> 等天然可聚焦/可交互的元素稳定触发。普通 <div> 或 <span> 在部分旧浏览器中可能不响应。
立即学习“前端免费学习笔记（深入）”；
解决方案是显式添加 cursor: pointer 或设置 tabindex 属性（后者影响可访问性）：
.card { cursor: pointer; }
.card:hover { background: #f0f0f0; }
注意：移动端 Safari 对 :hover 支持有限，首次点击才触发 hover，后续才可能保持——不能依赖它做核心交互反馈。
hover 与 transition 搭配才有渐变效果
只写 :hover 会立刻切换样式，看起来生硬。要实现平滑过渡，必须加 transition 声明在**非 hover 的原始选择器上**：
- 写在
:hover规则里无效 - 推荐指定具体属性，如
transition: background-color 0.2s ease;，避免用all引发意外重绘 - 如果悬停时修改了尺寸（如
height、padding），需确保原始元素有明确的高度或overflow: hidden，否则可能抖动
示例：
.toggle-btn {
background: #333;
transition: background-color 0.25s, transform 0.2s;
}
.toggle-btn:hover {
background: #007bff;
transform: scale(1.05);
}
嵌套 hover（子元素高亮）要小心层级和事件穿透
想让父容器悬停时，内部某个图标变色，写法是：
.item:hover .icon { color: #e74c3c; }
但要注意：
- 如果
.icon是绝对定位且超出父容器边界，悬停移出父元素区域时，:hover状态会立即丢失 - 若父元素有
pointer-events: none，整个 hover 链条失效 - 不要用
*:hover全局匹配，性能差且不可控
复杂交互建议改用 JavaScript 监听 mouseenter/mouseleave，尤其涉及延迟显示、条件判断或动画队列时。
hover 看似简单，但跨设备兼容性、过渡性能、事件边界这几个点，实际项目里最容易漏掉。
