将 rgba 不透明度悬停在 table 行上不起作用
Hovering a table row with rgba opacity not working
当我悬停 table 行时,悬停颜色不是该行颜色的深色版本,而是始终是灰色。
我错过了什么?
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() 颜色的演示)
当我悬停 table 行时,悬停颜色不是该行颜色的深色版本,而是始终是灰色。
我错过了什么?
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() 颜色的演示)