html - 强制 child 在悬停时继承父颜色

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>