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

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

{{1}}

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

2 个答案: