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），但绝大多数现代项目已无需考虑这点。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查目标用户 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 管理
selectedclass，而不是依赖 hover - 不要试图用
@media (hover: hover)来开关 hover 样式 —— 它在 iOS 上返回 false，但用户实际可能连着鼠标，判断不可靠
真正麻烦的不是怎么写 hover，而是想清楚：这个高亮到底服务于谁、在哪种交互路径下生效。桌面端鼠标悬停、触屏点击反馈、键盘焦点状态，三者逻辑不同，不能一套样式硬套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
