html - 如何在悬停时使按钮内的文本透明？虽然背景应该保持不变

如何在悬停时使按钮内的文本透明？背景应该保持不变。我尝试了opacity：0;但是它使整个按钮不可见。救命。我尝试了以下代码。

<style>
.btn:hover {
    background-color: #ededed !important;
    color: #3c3c3c !important;
    opacity:0;
}
</style>

<button class=" btn btn-success  btn-lg">test button</button>

最佳答案

您需要对rgba(color,color,color,opacity);规则使用color。

试试这个小提琴：
https://jsfiddle.net/reala/5xq3mj66/

编辑：好的-我想我理解您的要求。

您希望文本在悬停时是透明的（但不是不可见的，这是“透明的”），以便可以通过文本看到背景。

解决方案非常相似，但是将rgba的不透明度更改为非常低的值，例如0.3 ...例如：

.btn:hover {
   color: rgba(0,0,0,0.3);
}

并记住要删除您的opacity: 0，或将其重置为opacity: 1-否则它将使整个按钮透明。那不是你想要的。

关于html - 如何在悬停时使按钮内的文本透明？虽然背景应该保持不变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59012332/