li:hover背景变色失效的主因是li默认为inline元素且悬停热区过小，需设display:block/inline-block并添加padding；IE8不支持li:hover，移动端hover不可靠，应改用a标签或JS方案。
ul li:hover 背景变色失效？检查 display 和 padding
直接写 li:hover { background: #eee; } 常常没反应，不是 CSS 写错了，而是 li 默认是 inline 元素（尤其在某些旧浏览器或重置不全时），:hover 对 inline 元素的背景渲染不可靠。更常见的是，li 里只有文字、没设 padding 或 line-height，导致鼠标实际悬停区域远小于视觉范围，看起来“没变色”。
- 确保
li是 block 或 inline-block：加display: block;或display: inline-block; - 给
li显式设置padding（比如padding: 8px 12px;），让悬停热区和视觉区域对齐 - 避免父容器（如
ul）设了overflow: hidden或clip-path，可能裁掉 hover 效果
兼容性问题：IE8 不支持 :hover 伪类作用于非 a 元素
如果项目还需支持 IE8，li:hover 直接无效——这是 IE8 的硬限制。此时必须用 JS 模拟，或者改用 a 标签包裹内容并给 a 加 hover 样式。
- 推荐方案：把列表项写成
<li><a href="#">选项</a></li>，然后写a:hover { background: #f5f5f5; } - 若必须用
li，可用document.querySelectorAll('li').forEach(el => el.addEventListener('mouseover', ...))手动切换 class，但注意 IE8 不支持addEventListener，得用attachEvent - 现代项目（IE11+）可放心用原生
:hover，无需 polyfill
背景色闪烁或跳动？可能是 margin 和 padding 混用导致重排
当 hover 时背景色变了，但整个列表项位置轻微抖动，大概率是 hover 前后盒模型尺寸不一致——比如正常状态用 margin 控制间距，hover 时又加了 padding 或边框，触发重排。
- 统一用
padding控制内边距，hover 时不新增 padding，只改 background - 如果需要 hover 时加边框，提前预留透明边框：
border: 1px solid transparent;，hover 时改颜色而非增删 - 避免在 hover 中修改
height、width、margin等影响布局的属性
移动端 touch 设备上 hover 不生效？别依赖 :hover
iOS Safari 和部分 Android 浏览器默认不触发 :hover（除非用户真点了两次），所以纯 CSS 的 li:hover 在手机上基本不可靠。
立即学习“前端免费学习笔记（深入）”；
- 优先用
:active做按下反馈：li:active { background: #e0e0e0; } - 如需类似 hover 的持续高亮，应配合 JS 切换 class（比如点击时加
is-active），再用 CSS 定义该 class 的样式 - 不要指望
touchstart+:hover组合能稳定工作；iOS 上:hover只在极少数情况下被临时启用（如 meta viewport 设置了user-scalable=no）
