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

Question

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

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

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

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

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

动画

Answer 1

假设您在 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/

Answer 2

如果按钮只有一个 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（如 http://caniuse.com/#search=transition 所示），请记住添加 -webkit-transition 前缀版本。

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

How to animate background opacity without affecting content opacity (when hover)?

css

jquery

hover