我正在尝试创建我的第一个 css 过渡,但它不起作用。我尝试使用简码,将转换放在 .btn-zen-inverse:hover 中。为什么它不起作用?(在最新版本的chrome中测试)
.btn {
color: white;
font-family: 'ZLight';
border: 2px solid white !important;
box-shadow: 0 0 6px rgba( 12, 41, 63, 0.3);
text-shadow: none;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%);
/* FF3.6+ */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.21) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#6bffffff', GradientType=0);
/* IE6-9 */
padding: 3px;
}
.btn:hover {
transition: background-image 0.5s;
transition: background-color 0.5s;
-moz-transition: background-image 0.5s;
/* Firefox 4 */
-webkit-transition: background-image 0.5s;
/* Safari and Chrome */
-webkit-transition: background-color 0.5s;
/* Safari and Chrome */
-o-transition: background-image 0.5s;
/* Opera */
color: white;
}
.btn-zen-inverse {
background-color: #273032;
}
.btn-zen-inverse:hover {
background-image: none;
background-color: #273032;
}
<a class="btn btn-zen-inverse btn-large">
<span>Prova Zenconomy Gratis</span>
</a>