如何解决鼠标悬停时表格TR整行未高亮仅TD变色的问题？

问题根源 #

你写的CSS选择器有问题：.addItem_tr :hover 里的空格是关键——它表示选中**.addItem_tr元素下的所有子元素**的悬停状态，所以鼠标放上去时，只有<td>会变蓝，而非整行<tr>。

修复步骤 #

1. 修正CSS选择器 #

把选择器里的空格删掉，直接给<tr>本身加悬停样式：

.addItem_tr:hover {
  background: blue;
}

2. 处理单元格背景覆盖（可选） #

如果你的<td>本身设置了背景色，会把行的背景盖住，这时需要让单元格继承行的背景：

.addItem_tr:hover {
  background: blue;
}
.addItem_tr:hover td {
  background: inherit;
}

完整代码示例 #

最终CSS #

.addItem_tr:hover {
  background: blue;
}
/* 若td有默认背景色，添加下面这段 */
.addItem_tr:hover td {
  background: inherit;
}

对应HTML #

<table>
  <thead>
    <tr>
      <th width="15%"></th>
      <th width="35%"></th>
      <th width="50%"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="addItem_tr">
      <td class="td_add_serviced_item">{item.quantity}</td>
      <td class="td_add_serviced_item">{item.productID}</td>
      <td class="td_add_serviced_item">{item.productInfo.productDescription}</td>
    </tr>
    <tr class="addItem_tr">
      <td class="td_add_serviced_item">{item.quantity}</td>
      <td class="td_add_serviced_item">{item.productID}</td>
      <td class="td_add_serviced_item">{item.productInfo.productDescription}</td>
    </tr>
  </tbody>
</table>

效果说明 #

修改前的问题：

修改后，鼠标悬停时整个<tr>行都会变成蓝色，不会只局限于单个单元格。

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