Question

我将鼠标悬停在我网站上的链接上时出现问题。注意：我在黑色背景上使用白色字体。我有几个链接 - 只是典型的

<a href="link.com" target="_blank" class="ext_link">Click here</a>

我的css：

.ext_link {transition:0.5s; -webkit-transition:0.5s;}
.ext_link:hover {color:rgba(125, 249, 255, 1); opacity:0.75;}

当我将鼠标悬停在其中一个链接上时，动画会突然发生 - 它看起来像链接开始变灰一秒钟，然后突然变成蓝色而没有任何过渡。然后，当我关闭鼠标时，过程反过来发生。链接突然变为灰色，然后逐渐变回原来的白色。

这是一个新的错误 - 我的网站在两天前工作正常。另请注意，此错误仅发生在我的计算机上。当我在其他任何人的计算机上访问我的网站时，动画工作正常。

我已尝试清除缓存，重新启动浏览器等。

Answer 1

我认为现在没关系：
检查此[ LINK ]
我没有看到任何错误，但有时为了加快转换，您可以向您的元素添加transform: translateZ(0)供应商。

body {
    background: black;
}
.ext_link {
    font-size: 5em;
    color: white;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ext_link:hover {
    color:rgba(125, 249, 255, .75);         
}

CSS3越野车悬停/过渡效果

1 个答案: