:hover 给 li 加背景色需写 li:hover { background-color: #f0f0f0; }，但要注意避免被重置样式覆盖、移动端不支持、transition 卡顿及 IE8 仅支持 a:hover 等兼容性问题。
怎么用 :hover 给 <li> 加背景色
直接写 li:hover { background-color: #f0f0f0; } 就行，但得确保没被其他样式覆盖。常见问题是父元素设了 background 或用了 !important 的全局重置，结果 hover 没反应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用类名限定范围，比如
.nav-list li:hover，避免污染全局li - 检查是否在 CSS 中提前写了
li { background: none; }—— 有些重置库会清掉默认背景，导致 hover 看不出变化 - 如果列表项内有
<a></a>，记得同时处理a:hover，否则鼠标移到文字上时背景可能闪烁或不一致
为什么有时候 :hover 在移动端不生效
因为大部分移动浏览器不触发 :hover（除非模拟桌面模式），尤其 iOS Safari 默认忽略它。这不是 bug，是规范行为 —— 移动端没有“悬停”这个交互概念。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别依赖
:hover做关键功能提示，比如“点这里展开”，该用:active或 JS 控制显隐 - 真要兼容，可用
@media (hover: hover)包一层，把 hover 样式仅给支持的设备：
/* 只在支持 hover 的设备上生效 */
@media (hover: hover) {
.item:hover {
background-color: #e8f4fc;
}
}
:hover 和 transition 配合时卡顿怎么办
背景色变化本身很轻量，但一旦加了 transition: all 0.3s，浏览器可能把整个元素标记为“需重绘”，尤其在列表项多、DOM 深、或用了 box-shadow 的时候，滚动或悬停时容易掉帧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只过渡明确属性，比如
transition: background-color 0.2s ease，别用all - 对频繁悬停的列表，加
will-change: background-color（慎用，只在必要时） - 避免在
:hover里改height、padding或触发布局（layout）的属性，那才是真卡
IE8 不支持 :hover 于非 <a></a> 元素？
是的，IE8 及更早版本只允许 a:hover，对 li:hover、div:hover 完全无视。现在虽已淘汰，但若维护老系统，得留个心眼。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认目标环境 —— 如果还跑着 IE8，就别写
li:hover，改用 JS 绑定onmouseenter/onmouseleave - 用
class="hover"+ JS 切换，比写一堆条件注释干净 - 现代项目可放心用，但构建工具（如 Autoprefixer）不会补这个，它不属于 CSS 属性兼容问题，而是引擎限制
CSS 的 :hover 看似简单，但实际生效依赖渲染引擎判断、设备能力、样式层叠顺序，甚至 DOM 结构深度 —— 最容易被忽略的是：它不是“只要写了就一定动”，而是一个需要验证上下文的信号。
