如下面的代码片段所示,我有一个带有线性渐变背景的按钮。在悬停中,我想将其更改为单色。当我尝试这种效果时,我会得到闪烁效果,背景消失了,然后出现了背景色。有什么解决方法可以防止这种闪烁效果?
a {
text-transform: uppercase;
background-color: transparent;
border-radius: 3px;
padding: 5px 20px;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background-image: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
border: none;
outline: none;
}
a:hover {
background-image: none;
background-color: #33afbd;
}
<a href="#">Button</a>
答案 0 :(得分:3)
我只使用了background
。并使用background:linear-gradient(#33afbd,#33afbd);
代替background-color:#33afbd;
a {
text-transform: uppercase;
border-radius: 3px;
padding: 5px 20px;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
border: none;
outline: none;
}
a:hover {
background:linear-gradient(#33afbd,#33afbd);
}
<a href="#">Button</a>
答案 1 :(得分:1)
只需将原始background-color
设置为您想要的那个。
问题在于,在过渡过程中,它首先将背面设置为透明,然后将其设置为所需的颜色。
解决方案:
a {
text-transform: uppercase;
background-color: #33afbd;
border-radius: 3px;
padding: 5px 20px;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
background-image: linear-gradient(to bottom, rgb(69, 225, 243), rgb(1, 201, 223));
border: none;
outline: none;
}
a:hover {
background-image: none;
}
<a href="#">Button Here</a>