精选HTML列表项鼠标划过背景变色代码-html教程-PHP中文网

li:hover背景变色失效的主因是li默认为inline元素且悬停热区过小，需设display:block/inline-block并添加padding；ie8不支持li:hover，移动端hover不可靠，应改用a标签或js方案。

精选html列表项鼠标划过背景变色代码

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 样式。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

推荐方案：把列表项写成 <li>@#@#@#@#@#@#@#@#@#@0</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）

真实项目里，最常被忽略的是 display 类型和移动端行为差异——hover 不是“鼠标悬停”，而是“输入设备处于悬停状态”，而触摸屏根本没有这个状态。