我正在尝试创建我的第一个 css-transitions,但它不起作用。我试过使用短代码,将转换放在 .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>
最佳答案
首先,您的转换定义需要成为基类定义的一部分
即:
div {
transition: background-color 0.5s;
}
代替:
/* this is wrong */
div:hover {
transition: background-color: 0.5s;
}
如果你愿意的话,实际的改变“效果”被放置在悬停伪类中
像这样:
div:hover {
background-color: red;
}
和你的基类定义:
div {
background-color: white;
}
话虽如此,我 99.7% 确定您无法拆分背景“速记”样式。尝试在基类和伪类定义中分离您尝试转换的各个样式(即:背景颜色和背景图像)。
编辑:显然你可以过渡渐变,只是不能过渡到“无”。
关于css - 为什么我的背景转换不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12814068/