文本颜色中断CSS转换

Question

我不明白为什么这会破坏它。我有一个元素，它使用CSS转换在悬停时淡出到渐变背景中。无论出于什么原因，每当我将悬停时的文本颜色设置为白色时，转换就会中断？

.social-item {
margin-left: 0.25vw;
padding: 0.1vw;
transition: 0.2s;
color: white;
}
.social-item:hover {
background: linear-gradient(to left, #8E2DE2, #DC0486);
color: white;
}

<a href="https://google.com" class="social-item"><i class="fab fa-keybase"></i> Keybase</a>

我也在使用Bulma和Font Awesome。

Answer 1

您不能简单地使用背景渐变进行过渡。可设置动画的CSS属性
使用伪元素并进行不透明度转换。

.social-item {
position: relative;
color: white;
z-index: 1;
}
.social-item::before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to left, #8e2de2, #dc0486);
z-index: -1;
transition: opacity 0.5s linear;
opacity: 0;
}
.social-item:hover::before {
opacity: 1;
}

<a href="https://google.com" class="social-item"><i class="fab fa-keybase"></i> Keybase</a>

这是一篇很好的文章
谢谢！

Answer 2

我认为你的问题是你试图进行梯度转换。不支持它。但是如果你想模拟它，你可以在css中使用opacity属性。将opacity:0添加到主元素(.social项(，将opacity:1添加到悬停状态(.social-events:hover(。因此，过渡：0.2将应用于不透明度，因为它是受支持的，从而模拟所需的结果。因此，最终css应为.

.social-item {
margin-left: 0.25vw;
padding: 0.1vw;
transition: 0.2s;
color: white;
opacity:0;
}
.social-item:hover {
background: linear-gradient(to left, #8E2DE2, #DC0486);
color: white;
opacity: 1;
} 

如果你真的想让这个东西正常显示，而不仅仅是悬停，那么opacity:0对你不起作用。您必须使用伪选择器：after向主类添加一个伪元素，并在此基础上处理所有的过渡和背景渐变。这是一个代码笔示例。