直接用 tbody tr:hover 设置背景色并让单元格继承即可实现表格行悬停变色，需避免 td/th 覆盖、border-collapse 干扰及深色模式对比度不足等问题。

表格行悬停变色的CSS选择器怎么写

直接用 :hover 作用在 <tr> 上就行，不需要 JavaScript。关键是要确保父容器（比如 <table>）没设 border-collapse: collapse 以外的干扰样式，否则某些浏览器下悬停可能失效。

• 必须给 <tr> 设置背景色，否则悬停时颜色变化不明显（默认是透明）
• 不要只写 tr:hover 就完事——如果表格有 <thead> 或 <tbody>，建议限定范围，比如 tbody tr:hover，避免表头也被高亮
• IE8 及更早版本不支持 tr:hover，但现代项目基本不用考虑

为什么加了:hover却没反应

常见原因是 <td> 或 <th> 自身设置了 background-color，把 <tr> 的背景盖住了。CSS 层叠中，单元格背景会覆盖行背景。

• 解决办法：把背景色统一写在 td, th 上，而不是 tr；或者给 td, th 设 background-color: inherit
• 另一个坑：用了 border-spacing 且没设 border-collapse: separate，导致 tr 实际不可见区域变小，悬停热区失效
• 检查是否误写了 tr: hover（冒号后多空格），这种语法无效

兼容深色模式和可访问性要注意什么

单纯用固定色值（比如 #f0f0f0）悬停，在深色系统下可能对比度不足甚至看不见。别硬编码颜色。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 优先用 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; }

颜色值可以换，但第二行继承逻辑漏掉，就容易白忙活。