悬停时背景色闪烁的渐变按钮
悬停时背景色闪烁的渐变按钮
提问于 2019-02-20 22:39:53
正如您在下面的代码片段中所看到的，我有一个具有线性渐变背景的按钮。在悬停时，我想将其更改为单一颜色。当我尝试这个效果时，我得到了一个闪烁的效果，背景消失了，然后背景颜色出现了。有什么解决方法可以防止这种闪烁效应吗？
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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-20 22:41:53
对于这些，我只使用了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>
Stack Overflow用户
发布于 2019-02-20 22:44:10
只需将原始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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54788868
复制相关文章
相似问题