在这里的问题,我想让此文本在鼠标悬停时旋转,此代码在Firefox上完美运行,但在Chrome(版本25.0.1364.97 m)或IE9上却无法运行
http://jsfiddle.net/B2u4j/1/
<div class="holder circulate" > Hello World </div>
的CSS
.holder {
border: 10px solid #FFFFFF;
float: left;
margin-left:0px;
margin-top:0px;
box-shadow: 2px 2px 5px #333333;
overflow: hidden;
transition: all 0.5s Ease;
}
.circulate:hover {
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-o-transform: rotate(360deg); /* Opera */
-moz-transform: rotate(360deg); /* Firefox */
}
最佳答案
您需要为transition
添加供应商前缀属性,以获得更好的跨浏览器支持。
.holder {
border: 10px solid #FFFFFF;
...
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
您可以在http://css3please.com/上为哪些浏览器添加最新的前缀属性
关于css - Class:hover在Firefox上有效,但在Chrome或IE9上无效,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15221131/