将 rgba 不透明度悬停在 table 行上不起作用

Hovering a table row with rgba opacity not working

当我悬停 table 行时,悬停颜色不是该行颜色的深色版本,而是始终是灰色。

Code example

我错过了什么?

tr:hover {
  background: rgba(0, 0, 0, 0.1);
}

.red {
  background: red;
}

.gray {
  background: gray;
}
<table>
    <tbody>
      <tr>
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="gray">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="red">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
    </tbody>
  </table>

您正在用另一个悬停的背景覆盖背景。相反,您需要在初始背景的顶部添加另一层。

在背景颜色的顶部添加背景图像的示例,其中背景图像也是一种颜色:

tr:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1));
}

.red {
  background-color: red;
}

.gray {
  background-color: gray;
}
<table>
    <tbody>
      <tr>
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="gray">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="red">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
    </tbody>
  </table>

您还可以使用嵌入阴影使背景颜色或图像变暗。

tr:hover {
  box-shadow:inset 0 0 0 100px rgba(0, 0, 0, 0.1);
}

.red {
  background: red;
}

.gray {
  background: gray;
}
<table>
    <tbody>
      <tr>
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="gray">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
      <tr class="red">
        <td>aaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
      </tr>
    </tbody>
  </table>

任何颜色都可以使用,甚至是它们的混合:https://codepen.io/gc-nomade/pen/wouBe(带有少量 rgba() 颜色的演示)