:hover伪类可直接实现背景色变化，需正确书写、确保元素有尺寸、避免被覆盖，并用transition优化动画；移动端支持有限，嵌套时注意冒泡问题。
用 :hover 伪类直接改背景色最简单
不需要 JavaScript，纯 CSS 就能实现。关键在于给目标元素（比如 <div>、<p> 或带 class 的容器）添加 :hover 规则，并设置 background-color。
常见错误是写成 hover（漏掉冒号）或作用在不可交互的标签上却没设 cursor: pointer，导致视觉反馈不明显。
-
:hover必须写在选择器后面，例如.box:hover { background-color: #e0f7fa; } - 如果背景色没生效，先检查是否被其他样式（如内联
style或更高优先级规则）覆盖 - 对
<a>标签默认有下划线和颜色，建议同时重置text-decoration: none避免干扰
想让整个区域响应滑过，得确保元素有明确宽高或内容撑开
空的 <div> 默认高度为 0，:hover 看不出效果。不是 CSS 写错了，而是“没地方可悬停”。
- 用
height/min-height显式设定区域大小，例如min-height: 100px; - 或者让内容自然撑开：加文字、图片，或用
padding扩展可触发区域 - 避免只靠
margin扩大“感觉上的区域”——:hover不响应 margin 区域
过渡动画让颜色变化更自然，但要注意性能
加 transition 能让背景色渐变，但别对所有属性盲目过渡。背景色变化本身是轻量操作，但写成 transition: all 0.3s 可能引发重排或 GPU 切换问题。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
transition: background-color 0.2s ease; - 如果用了渐变背景（
background: linear-gradient(...)），CSS 无法硬件加速平滑过渡，此时颜色切换会卡顿，建议改用纯色 - 移动端 Safari 对
:hover支持有限（常需点击才触发），别依赖它做核心交互逻辑
多个嵌套区域时，:hover 会冒泡，要小心子元素覆盖父级效果
比如父 <div class="card"> 设了悬停变蓝，里面有个按钮 <button> 也设了悬停变红——鼠标移到按钮上，父级的蓝色就消失了，因为按钮挡住了父元素的 hover 区域。
- 解决方法之一：给子元素也加相同背景色，保持视觉一致
- 或者用
pointer-events: none让子元素“透出”父级 hover（仅适用于非交互子元素，如图标、文字） - 更稳妥的做法：把悬停效果统一放在最外层容器上，子元素只负责自身状态（如文字颜色、边框），不改背景
:hover 更容易让人卡住。 
