强制孩子在悬停时继承父颜色

Question

我有一个表格，其中每一列的文本部分都有不同的颜色。

我喜欢在一行悬停时做的是用背景突出显示，并将所有文本转换为一种颜色，而不是正常显示时的单独颜色。

下面是我的代码。你会看到紫色的、很棒的黑色文本。然后当它悬停时，只有黑色文本变成红色。

现在我尝试为每个单独的<td>列悬停，但这不起作用。悬停颜色只会在鼠标专门位于 TD 单元格上时更改文本颜色，而不会在任何悬停在该特定行上的单元格上时更改文本颜色。

.musicListTracks h5 {
  padding: 0px;
  margin: 0px;
}

.musicListTracks tr:hover {
  background-color: #000000;
  color: red !important;
  cursor: pointer;
}

.musicListTracks tr td:nth-child(1) span {
  color: #8470FF;
  cursor: pointer;
}

.musicListTracks tr td:nth-child(2) h5 {
  color: darkgrey;
}

<table class="musicListTracks" cellpadding=5 cellspacing=0>
  <tr>
    <td><span>cell 1</span></td>
    <td>
      <h5>cell 2</h5>
    </td>
    <td>
      <h5>cell 3</h5>
    </td>
  </tr>
  <tr>
    <td><span>cell 1b</span></td>
    <td>
      <h5>cell 2b</h5>
    </td>
    <td>
      <h5>cell 3b</h5>
    </td>
  </tr>
  <tr>
    <td><span>cell 1c</span></td>
    <td>
      <h5>cell 2c</h5>
    </td>
    <td>
      <h5>cell 3c</h5>
    </td>
  </tr>
</table>

任何帮助是极大的赞赏。

Answer 1

您为前两个单元格定义了颜色，但没有为第三个单元格定义颜色。这就是为什么只有第三个单元格在悬停时呈现红色。

取而代之的是：

.musicListTracks tr:hover {
  background-color: #000000;
  color: red !important;
  cursor: pointer;
}

尝试这个：

.musicListTracks tr:hover {
  background-color: #000000;
  cursor: pointer;
}

.musicListTracks tr:hover * {
  color: red !important;
}

.musicListTracks tr:hover {
  background-color: #000000;
  color: red !important;
  cursor: pointer;
}

.musicListTracks tr:hover {
  background-color: #000000;
  cursor: pointer;
}

.musicListTracks tr:hover * {
  color: red !important;
}