Question

在开始时我已经制作了一些<a>按钮，并写了一个：带有常规css的悬停规则，它只是在悬停时在链接上添加下划线。

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

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

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

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

Answer 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之前关心Androids，请记得添加-webkit-transition前缀版本（如http://caniuse.com/#search=transition所示）。

Answer 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/

如何动画背景不透明度而不影响内容不透明度（悬停时）？

2 个答案: