Question

我在我的wordpress网站添加了一些悬停过渡，我已经将hover.css中的hvr-icon-forward和hvr-fade类组合在一起。在悬停网站上我将这些类合并到了检查器中，它起了很大的作用。出于某种原因在我的网站上我得到一个白色背景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上应用了转换，并且在css中也应用了css gradient。

您需要在css中覆盖如下：

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

这是工作Fiddle。

Answer 2

试试这个css for grandient：

 #home_cta .hvr-fade:hover {    
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0000f5+0,0000c3+100 */
    background: #0000f5; /* Old browsers */
    background: -moz-linear-gradient(left,  #0000f5 0%, #0000c3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #0000f5 0%,#0000c3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #0000f5 0%,#0000c3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000f5', endColorstr='#0000c3',GradientType=1 ); /* IE6-9 */
    }

更新了jsfiddle：https://jsfiddle.net/eh5qu0h7/4/

Answer 3

当浏览器用渲染的渐变替换非悬停状态的纯色背景颜色时，您可能会看到瞬间闪烁。您可以通过将非悬停背景更改为渐变（使用预期的背景颜色作为起点和终点）来解决此问题...

#home_cta a {
  background-color: #0619BF;
  margin-bottom: 10px;
  width: 50%;
  padding: 16px;
  color: white;
  font-weight: bold; }
#home_cta .hvr-fade {  
    background: #0619BF;
    background: -webkit-linear-gradient(legacy-direction(to right), #0619BF 0%, #0619BF 100%);
    background: linear-gradient(to right, #0619BF 0%, #0619BF 100%); 
}
#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%); 
}

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

Answer 4

如果您将background-image改为仅background，则问题已修复。但没有过渡，悬停时突然出现渐变：

#home_cta .hvr-fade:hover {
    background: #0000f5;
    background-image: -webkit-linear-gradient(legacy-direction(to right), #0000f5 0%, #0000c3 100%);
    background-image: linear-gradient(to right, #0000f5 0%, #0000c3 100%); 
 }

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

4 个答案: