CSS 中为表格行（tr）设置 :hover 背景色失效，通常是因为单元格（td/th）自身设置了 background-color，导致其覆盖了父级 tr 的悬停样式；解决关键是移除单元格的显式背景色，仅由行控制整体背景。

css 中为表格行（`tr`）设置 `:hover` 背景色失效，通常是因为单元格（`td`/`th`）自身设置了 `background-color`，导致其覆盖了父级 `tr` 的悬停样式；解决关键是移除单元格的显式背景色，仅由行控制整体背景。

在 HTML 表格中实现优雅的悬停效果（如整行变灰），看似简单，却常因 CSS 层叠规则而失败。核心问题在于：<tr> 的 <code>:hover 样式无法穿透到子元素 <td> 和 <code><th> 的显式背景色。当您为 <code>td 或 th 单独设置 background-color: #fff 时，该声明具有更高特异性（或至少与 tr:hover 同级渲染），会完全遮盖 tr 的背景变化，使悬停效果“消失”。

✅ 正确做法是：将背景色统一交给 <tr> 控制，而 <code><td>/<code><th> 保持透明背景（即不设 <code>background-color）。这样，当鼠标悬停在行上时，tr:hover 的背景色自然透出，覆盖所有单元格区域。

以下是修正后的推荐 CSS 片段：

.specific-table-container {
  margin: 20px auto;
  width: 90%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  background-color: #fff; /* 容器背景，不影响内部行悬停 */
}

.specific-table-container table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 关键修改：移除 td/th 的 background-color */
.specific-table-container th,
.specific-table-container td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
  /* ❌ 删除这一行 → background-color: #fff; */
}

/* 悬停作用于整行，背景色自然生效 */
.specific-table-container tr:hover {
  background-color: #f2f2f2; /* 浅灰色，柔和且可读性强 */
}

? 注意事项与进阶建议：

• ✅ 始终确保 tr:hover 的选择器优先级 ≥ 其他可能影响背景的规则（如全局重置样式）；
• ✅ 若需默认行白底，可为 tr 设置初始背景：.specific-table-container tr { background-color: #fff; }，再用 tr:hover 覆盖；
• ⚠️ 避免在 td 内嵌套带背景的块级元素（如 <div style="background: white">），它们同样会遮挡悬停效果；<li>? 如需更精细控制（如首行表头固定白底、数据行可悬停），可分别给 <code><thead> tr 和 <code><tbody> tr 添加独立样式。<p>通过这种“背景托管”策略，既能保持表格整体视觉干净（全白底），又能实现流畅、语义清晰的交互反馈——这才是符合现代 CSS 最佳实践的悬停实现方式。</p> </tbody>