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

【问题标题】：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 类是什么样的？您的链接目前有什么背景颜色？

标签： jquery css 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/

【讨论】：