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

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

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

✅ 正确做法是：将背景色统一交给 控制，而 / 保持透明背景（即不设 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 内嵌套带背景的块级元素（如
  ），它们同样会遮挡悬停效果；
• ? 如需更精细控制（如首行表头固定白底、数据行可悬停），可分别给 tr 和 tr 添加独立样式。

  通过这种“背景托管”策略，既能保持表格整体视觉干净（全白底），又能实现流畅、语义清晰的交互反馈——这才是符合现代 CSS 最佳实践的悬停实现方式。