当颜色设置时，鼠标悬停在表格行上时更改其颜色

Question

我有一个由服务器动态创建的HTTP表格，使用数据库中的数据。根据某些值，服务器设置表格行style="background-color:#RRGGBB"。这个值来自数据库中的字符串，因此CSS不是一个选项。
这一切都很好地工作，但是它会覆盖CSS为表格行悬停设置的背景颜色。
在这种情况下，如何更改表格行悬停时的颜色，最好保持与数据库中的颜色相似？

table tr:nth-child(2n):hover {
  background-color: silver;
}

table tr:nth-child(2n+1):hover {
  background-color: gray;
}

table tr:nth-child(2n) {
  background-color: #DDDDEE;
}

table tr:nth-child(2n+1) {
  background-color: #CCCCDD;
}

<table width="100%">
  <tr>
    <td>Line1</td>
  </tr>
  <tr>
    <td>Line2</td>
  </tr>
  <tr>
    <td>Line3</td>
  </tr>
  <tr style="background-color:#FFDDDD;">
    <td>Line4 - With color, no hover effect</td>
  </tr>
  <tr style="background-color:#DDFFDD;">
    <td>Line5 - With color, no hover effect</td>
  </tr>
  <tr>
    <td>Line6</td>
  </tr>
  <tr>
    <td>Line7</td>
  </tr>
  <tr>
    <td>Line8</td>
  </tr>
</table>

- FalcoGer

---

现在你想要的是在第四行和第五行实现悬停效果吗？ - Amaresh S M

你可以使用!important来覆盖悬停时的背景颜色。（像这样：background-color: #ddddee !important;） - Tim Gerhard

@AmareshSM 是的，完全正确。 - FalcoGer

Answer 1

您可以在悬停时向每个元素应用半透明的盒子阴影。

table tr:hover {
    box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2);;
}

table tr:nth-child(2n) {
  background-color: #DDDDEE;
}

table tr:nth-child(2n+1) {
  background-color: #CCCCDD;
}

<table width="100%">
  <tr>
    <td>Line1</td>
  </tr>
  <tr>
    <td>Line2</td>
  </tr>
  <tr>
    <td>Line3</td>
  </tr>
  <tr style="background-color:#FFDDDD;">
    <td>Line4 - With color, no hover effect</td>
  </tr>
  <tr style="background-color:#DDFFDD;">
    <td>Line5 - With color, no hover effect</td>
  </tr>
  <tr>
    <td>Line6</td>
  </tr>
  <tr>
    <td>Line7</td>
  </tr>
  <tr>
    <td>Line8</td>
  </tr>
</table>

- scatter

---

我发现0.05 alpha对我的情况更适用。非常感谢。我甚至不知道box-shadow这样的东西存在。 - FalcoGer

创造仅适用于背景颜色的Alpha掩码的绝妙想法(: - Bahram Ardalan

Answer 2

只需在您的悬停状态下添加 td

table tr:nth-child(2n) td:hover {
  background-color: silver;
}

table tr:nth-child(2n+1) td:hover {
  background-color: gray;
}

table tr:nth-child(2n) {
  background-color: #DDDDEE;
}

table tr:nth-child(2n+1) {
  background-color: #CCCCDD;
}

<table width="100%">
  <tr>
    <td>Line1</td>
  </tr>
  <tr>
    <td>Line2</td>
  </tr>
  <tr>
    <td>Line3</td>
  </tr>
  <tr style="background-color:#FFDDDD;">
    <td>Line4 - With color, no hover effect</td>
  </tr>
  <tr style="background-color:#DDFFDD;">
    <td>Line5 - With color, no hover effect</td>
  </tr>
  <tr>
    <td>Line6</td>
  </tr>
  <tr>
    <td>Line7</td>
  </tr>
  <tr>
    <td>Line8</td>
  </tr>
</table>

- James

Answer 3

你可以使用 onMouseOver 和 onMouseOut 事件来实现悬停效果。

onMouseOver="this.style.backgroundColor='grey'" 
onMouseOut="this.style.backgroundColor='#FFDDDD'"

table tr:nth-child(2n):hover {
  background-color: silver;
}

table tr:nth-child(2n+1):hover {
  background-color: gray;
}

table tr:nth-child(2n) {
  background-color: #DDDDEE;
}

table tr:nth-child(2n+1) {
  background-color: #CCCCDD;
}

<table width="100%">
  <tr>
    <td>Line1</td>
  </tr>
  <tr>
    <td>Line2</td>
  </tr>
  <tr>
    <td>Line3</td>
  </tr>
  <tr style="background-color:#FFDDDD;" onMouseOver="this.style.backgroundColor='grey'" onMouseOut="this.style.backgroundColor='#FFDDDD'">
    <td>Line4 - With color, no hover effect</td>
  </tr>
  <tr style="background-Color:#DDFFDD;" onMouseOver="this.style.backgroundColor='silver'" onMouseOut="this.style.backgroundColor='#DDFFDD'">
    <td>Line5 - With color, no hover effect</td>
  </tr>
  <tr>
    <td>Line6</td>
  </tr>
  <tr>
    <td>Line7</td>
  </tr>
  <tr>
    <td>Line8</td>
  </tr>
</table>

- Amaresh S M

---

如果可以的话，我宁愿不使用!important。 - FalcoGer

这不符合悬停颜色与原始颜色相似的规格要求。 - scatter

我还是坚持使用盒阴影，谢谢你的建议。 - FalcoGer

您也可以使用 onMouseOver 和 onMouseOut @FalcoGer。 - Amaresh S M