CSS 将鼠标悬停在表格上时更改表格中特定单元格的背景颜色

【问题标题】：CSS Changing background colour of specific cell in table when hovering over itCSS 将鼠标悬停在表格上时更改表格中特定单元格的背景颜色
【发布时间】：2017-10-24 03:19:18
【问题描述】：

我有一个三列的表。当我将鼠标悬停在第三列上时，我希望能够更改它的格式。

我希望能够结合

td:nth-child(3) {背景色：#ddd;}

和

td:hover {背景颜色：#ddd;}

我该怎么做？

【问题讨论】：

标签： css css-tables

【解决方案1】：

我想这就是你所追求的。

td:hover:nth-child(1) {background-color: #f5f5f5;}
td:hover:nth-child(2) {background-color: #ff0000;}
td:hover:nth-child(3) {background-color: #ddd;}

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

干杯

【讨论】：

【解决方案2】：

给单元格一个类名或一个 ID。

td[id="your id"]{...}

td[id="your id"]:hover{background-color: #ddd;}

【讨论】：