Question

请原谅我的CSS无知。

我正在尝试使用以下css将背景颜色应用于行：

tbody tr:hover {
  background-color: #F69;
  border: thin solid black;
}

HTML表格有一些固有的列颜色，如下所示。上面的CSS不会将颜色更改为#F69并保留颜色#993300。有没有办法覆盖这个HTML单元格着色？

 tbody tr:hover {
   background-color: #F69;
   border: thin solid black;
 }

<table>
  <tr>
    <th>11 lbs</th>
    <td></td>
    <td bgcolor="#993300">1</td>
    <td bgcolor="#993300">2</td>
    <td bgcolor="#993300">3</td>
    <td>&nbsp;</td>
  </tr>
</table>

Answer 1

我认为你想要这样的东西 -

tr td:hover {
  background-color: #F69;
  border: thin solid black;
}

<table width="100%">
<tr>
  <th colspan="5">11 lbs</th>
</tr> 
<tr>
  <td width="20%">&nbsp;</td>
  <td width="20%" bgcolor="#993300"></td>
  <td width="20%" bgcolor="#993300"></td>
  <td width="20%" bgcolor="#993300"></td>
  <td width="20%">&nbsp;</td>
</tr>
</table>

我希望它会对你有所帮助。

Answer 2

我尝试使用...
将背景颜色应用于行

如果我正确地阅读了您的问题，并认为您的表格中同时包含 th 和 td 元素，当您将鼠标悬停在该行上时，您似乎正在尝试同时更改行的子元素的background-color。

如果是这样，那么这就是你的解决方案：

tr:hover td,
tr:hover th {
  background-color: #F69;
  border: thin solid black;
}

所有行单元格都会在悬停时突出显示。

否则，如果您尝试一次更改background-color个单元格，我建议您选择Maddy的答案。

<强> Try it Online!

使用CSS Hover覆盖td bgcolor =“＃xxxxxx”？

2 个答案: