如何在不影响内容不透明度（悬停时）的情况下为背景不透明度设置动画？

Posted 2023-02-21

【中文标题】如何在不影响内容不透明度（悬停时）的情况下为背景不透明度设置动画？

【英文标题】：How to animate background opacity without affecting content opacity (when hover)?

【发布时间】：2015-07-18 13:39:35

【问题描述】：

一开始我制作了一些<a> 按钮，并使用常规css 编写了一个:hover 规则，它只是在悬停时在链接上加下划线。

现在，我想把它提升到一个新的水平，并为它设置动画以改变背景的不透明度.. 非常感谢！

*例如<a>元素： <a href="#contact">Contact</a>

*现在是css悬停规则： a:hover background-color: rgba(71,117,255,0.5);

我只是取了相同的颜色，并用 rgba 给它 0.5 的不透明度。 现在我想要同样的东西，只是用 JQuery 动画它。

【问题讨论】：

你当前的 a 和 a:hover 类是什么样的？您的链接目前有什么背景颜色？

【参考方案1】：

如果按钮只有一个background-color，你可以使用rgba来改变颜色不透明度而不影响其他属性。示例：

button 
    background-color: #f000;
    color: #333;
    transition: all .3s ease-in-out;


button:hover 
    background-color: rgba(255, 0, 0, 0);

注意transition 的定时和缓动功能，以便根据自己的需要进行调整。另外，如果您关心 4.4 之前的 android，请记住添加 -webkit-transition 前缀版本（如 http://caniuse.com/#search=transition 所示）。

【参考方案2】：

假设您在 CSS 中使用了:hover。你只是继续扩展它

示例代码：

html

<button type='button' class='sampleBtn'>Hover Here</button>

CSS

.sampleBtn

    background-color: #333;
    color: #fff;
    border: 1px solid #333;

.sampleBtn:hover

    text-decoration: underline;
    opacity: 0.4;
    border: none;

一个工作示例：https://jsfiddle.net/oz9hw2Lt/1/