tr:hover可实现表格行悬停高亮，需直接作用于tr元素，注意border-collapse、背景色叠加及IE8兼容性；移动端应改用:active或JavaScript选中态。

hover 伪类直接作用在 tr 上就行

表格行悬停高亮不需要 JavaScript，纯 CSS 就能搞定。关键点是把 :hover 写在 tr 元素上，而不是 td 或 table —— 否则可能触发不稳或样式穿透异常。

常见错误是给 td 加 hover，结果鼠标移入单元格间隙时高亮消失；或者忘了重置默认边框/背景色，导致悬停后文字发虚、颜色混叠。

• tr:hover 必须写在 tr 上，且确保 tr 没有设置 display: none 或被父容器裁剪
• 如果表格用了 border-collapse: collapse，悬停背景色会紧贴边框；用 separate 时要注意 border-spacing 会让背景出现空隙
• 深色主题下，避免用纯白背景悬停——可改用 rgba(0,0,0,0.05) 这类柔和叠加色

兼容性注意：IE8 不支持 tr:hover

IE8 及更早版本不响应 tr:hover，哪怕写了也无效。这不是写法问题，是浏览器引擎限制。

如果项目仍需兼容 IE8，必须用 JavaScript 补充（例如监听 mouseenter/mouseleave 并切换 class），但绝大多数现代项目已无需考虑这点。

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 检查目标用户 UA 统计，确认是否真有 IE8 流量 —— 多数情况下只是“以为要兼容”
• 若必须兼容，别用 onmouseover 直接写内联事件，推荐加 class：比如 tr.addEventListener('mouseenter', e => e.target.classList.add('hovered'))
• 用 pointer-events: none 的单元格会阻断 tr:hover 触发，调试时可临时删掉这类样式排查

悬停时保持边框连续不跳动

如果表格本身有边框，tr:hover 改背景色后，上下行之间可能出现 1px 空白或重叠，视觉上像“跳动”。根源在于边框合并方式和盒模型计算。

• 优先用 border-collapse: collapse，再给 tr:hover td 统一设 background-color，而非只设 tr
• 避免在 tr:hover 中同时修改 border 和 background —— 会导致重绘抖动
• 若用 box-shadow 模拟高亮（如 box-shadow: 0 0 0 2px #007bff），记得加 border-radius: 0 防止圆角切边

移动端触摸设备怎么处理？

iOS Safari 和 Android Chrome 在 touch 设备上不会触发 :hover（除非模拟鼠标事件），所以纯 CSS 的 tr:hover 在手机上基本无效。

这不是 bug，是规范行为。用户点一下表格行，不会像鼠标悬停那样持续高亮 —— 所以得换思路。

• 触摸场景下，建议用 :active 做瞬时反馈：tr:active { background-color: #e9ecef; }
• 如需“选中态”而非“悬停态”，应配合 JavaScript 管理 selected class，而不是依赖 hover
• 不要试图用 @media (hover: hover) 来开关 hover 样式 —— 它在 iOS 上返回 false，但用户实际可能连着鼠标，判断不可靠

真正麻烦的不是怎么写 hover，而是想清楚：这个高亮到底服务于谁、在哪种交互路径下生效。桌面端鼠标悬停、触屏点击反馈、键盘焦点状态，三者逻辑不同，不能一套样式硬套。