html - 颜色设置时悬停时更改表格行的颜色

Question

我有一个由服务器根据数据库中的数据动态创建的 http 表。根据某些值，服务器设置表格行 style="background-color:#RRGGBB"。此值来自数据库中的字符串，因此 CSS 不是一个选项。
这一切都很好，但是这会覆盖 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>

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>