直接用 tbody tr:hover 设置背景色并让单元格继承即可实现表格行悬停变色，需避免 td/th 覆盖、border-collapse 干扰及深色模式对比度不足等问题。
表格行悬停变色的CSS选择器怎么写
直接用 :hover 作用在 <tr> 上就行，不需要 JavaScript。关键是要确保父容器（比如 <code><table>）没设 <code>border-collapse: collapse 以外的干扰样式，否则某些浏览器下悬停可能失效。
- 必须给
<tr> 设置背景色，否则悬停时颜色变化不明显（默认是透明） <li>不要只写 <code>tr:hover就完事——如果表格有<thead> 或 <code><tbody>，建议限定范围，比如 <code>tbody tr:hover，避免表头也被高亮 - IE8 及更早版本不支持
tr:hover，但现代项目基本不用考虑 - 另一个坑：用了
border-spacing且没设border-collapse: separate，导致tr实际不可见区域变小，悬停热区失效 - 检查是否误写了
tr: hover（冒号后多空格），这种语法无效
为什么加了:hover却没反应
常见原因是 <td> 或 <code><th> 自身设置了 <code>background-color，把 <tr> 的背景盖住了。CSS 层叠中，单元格背景会覆盖行背景。
<ul>
<li>解决办法：把背景色统一写在 <code>td, th 上，而不是 tr；或者给 td, th 设 background-color: inherit
兼容深色模式和可访问性要注意什么
单纯用固定色值（比如 #f0f0f0）悬停，在深色系统下可能对比度不足甚至看不见。别硬编码颜色。
- 优先用
color-scheme: light dark配合prefers-color-scheme媒体查询，或直接用系统语义色，如background-color: highlight（部分浏览器支持） - 悬停色与默认色的亮度差至少要达到 3:1，否则视障用户难识别；可以用 Chrome DevTools 的“Contrast”面板验证
- 避免仅靠颜色区分状态——如果表格本身有重要信息依赖悬停提示，得补上其他视觉线索，比如轻微边框或阴影
要不要用JavaScript做hover效果
没必要。纯 CSS 完全够用，而且性能更好、无 JS 依赖、支持键盘焦点（:focus-within 可联动）。只有当你需要动画过渡、或动态计算颜色时才考虑 JS。
- 真要用 JS，别监听
mouseover/mouseout——改用mouseenter/mouseleave，避免子元素触发冒泡干扰 - 动态添加 class 比直接操作
style.backgroundColor更易维护，也方便和 CSS 变量配合 - 移动端没有 hover，所以这类交互本质是桌面端增强，不能作为核心功能依赖
tbody tr:hover { background-color: #f5f5f5; }
tbody tr:hover td, tbody tr:hover th { background-color: inherit; }
颜色值可以换，但第二行继承逻辑漏掉，就容易白忙活。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
