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

Question

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

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

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

Answer 1

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

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

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

您希望文本在悬停时为 TRANSLUCENT ，（但不是不可见的，这是透明的＆＃39;），以便您可以看到背景到文本。

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

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

请务必删除opacity: 0，或将其重置为opacity: 1 - 否则会使整个按钮透明。那不是你想要的。