为什么这会在我的悬停元素上发生？

Question

林添加一些悬停过渡到我的WordPress网站,我已经联合HVR-图标进和HVR-褪色类从hover.css,在悬停的地盘我结合在检查类和它的工作魅力,但对某些原因我网站我得到一个白色背景flashm然后显示正确的背景颜色看到gif 任何帮助将不胜感激.

HTML:

<div id="home_cta">
<a class="hvr-fade hvr-icon-forward" href="#">Building</a>
<a class="hvr-fade hvr-icon-forward" href="#">Plumbing &amp; Heating</a>
<a class="hvr-fade hvr-icon-forward" href="#">Self Build</a>
</div>

SCSS

#home_cta a {
 background-color: #0619BF;
 margin-bottom: 10px;
 width: 50%;
 padding: 16px;
 color: white;
 font-weight: bold; }
#home_cta .hvr-fade {
 background-color: #0619BF; }
#home_cta .hvr-fade:hover {
 background: #0000f5;
 background: -webkit-linear-gradient(legacy-direction(to right), #0000f5 0%, #0000c3 100%);
 background: linear-gradient(to right, #0000f5 0%, #0000c3 100%); }

JSfiddle - https://jsfiddle.net/mrjoshfisher/eh5qu0h7/3/

Answer 1

你有这个闪光灯,因为已经应用了转换,background-color并且gradient在css中也应用了css.

你需要在css中重写如下:

.hvr-fade {
    transition-property: color;
}

这是工作小提琴.