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

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 h5 {
  padding: 0px;
  margin: 0px;
}

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

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

.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 2

Michael 的回答是正确的，因为您没有针对 tds 中的所有元素。他的回答使用通配符来定位 td 中的任何元素。如果这是您想要的，那么他的答案将是最好的。如果您只想定位 span 和 h5，可以使用以下内容：

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

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

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