HTML表格hover（悬停）效果失效问题求助

核心问题是单元格（th/td）的背景色优先级高于表格行（tr）。你的代码中给th和td设置了background-color: #fff，当鼠标悬停时，tr:hover的灰色背景会被单元格的白色背景完全覆盖，所以看不到预期的悬停效果。

以下是几种可行的解决办法：

方案1：直接给悬停行的单元格设置背景色 #

把hover样式的作用对象从tr改为该行的th和td，确保单元格背景色被覆盖：

.specific-table-container tr:hover th,
.specific-table-container tr:hover td {
  background-color: #f2f2f2;
}

方案2：移除单元格的背景色（推荐） #

如果表格容器.specific-table-container已经设置了background-color: #fff，单元格会默认继承容器的白色背景，此时可以删掉th和td中的background-color: #fff，这样tr:hover的灰色就能正常显示：

.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;
}

方案3：临时提升hover样式优先级（应急用） #

如果项目中存在其他更高优先级的样式导致hover效果被覆盖，可以临时用!important强制生效，但不建议长期使用（会增加样式维护难度）：

.specific-table-container tr:hover {
  background-color: #f2f2f2 !important;
}

完整修正代码示例（方案1） #

.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;
}

.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 th,
.specific-table-container tr:hover td {
  background-color: #f2f2f2;
}

内容的提问来源于stack exchange，提问作者kinruyuu