在 tr 悬停时仅更改一个单元格

Question

我每行有 5 个单元格。我可以更改所有 5 个单元格的背景：

tr:hover {
   background: some_color;
}

但我希望 5 号单元格的颜色不同。需要使用 css、js 或 jquery.

来回答

Answer 1

您可以使用 :nth-of-type pseudo class

指定第五个单元格

tr:hover td:nth-child(5) {
  background-color: some_color;
}

tbody tr:hover {
  background-color: salmon;
}

tbody tr:hover td:nth-of-type(5) {
  background-color: steelblue;
}

<table border="1">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1-1</td>
      <td>Cell 1-2</td>
      <td>Cell 1-3</td>
      <td>Cell 1-4</td>
      <td>Cell 1-5</td>
    </tr>
    <tr>
      <td>Cell 2-1</td>
      <td>Cell 2-2</td>
      <td>Cell 2-3</td>
      <td>Cell 2-4</td>
      <td>Cell 2-5</td>
    </tr>
    <tr>
      <td>Cell 3-1</td>
      <td>Cell 3-2</td>
      <td>Cell 3-3</td>
      <td>Cell 3-4</td>
      <td>Cell 3-5</td>
    </tr>
  </tbody>
</table>

在 tr 悬停时仅更改一个单元格

Change only one cell on tr hover

css

row

cell