Question

我创建了一个按钮，当鼠标悬停在其上时会转换为不同的颜色。当鼠标不再悬停时，我无法弄清楚如何将颜色变回原来的颜色。

我尝试了许多方法，但没有奏效。

我可以使用另一个Psuedo元素吗？任何帮助都会非常感激。

#cta-btn:hover {
    background-color: #37A3BC;
    -webkit-transition-duration: 0.5s; 
    transition-duration: 0.5s;
 }

Answer 1

将此代码添加到原始cta-btn：

#cta-btn {
background-color: (enter your original bg color) ;
-webkit-transition-duration: 0.5s; 
transition-duration: 0.5s;
 }

Answer 2

这是我正在使用的CSS，我已经针对最新的浏览器对其进行了测试。

.team-member {
    padding: 15px; 
    background: #fafafa; 
    min-height: 150px; 
    width: 100%; 
    transition: linear background .5s; 
    border-radius: 3px; 
    overflow: auto; 

}
.team-member:hover { 
    background: #eee; 
    transition: linear background .5s;  
}

此外，您还应添加供应商特定的css前缀。对于前）

{
-moz-transition: linear background .5s; 
-o-transition: linear background .5s; 
-webkit-transition: linear background .5s; 
transition: linear background .5s;
}

使用转换持续时间使动画淡出

2 个答案: