在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>

​