Class:hover 适用于 Firefox，但不适用于 Chrome 和 IE9

Posted 2023-03-06

【中文标题】Class:hover 适用于 Firefox，但不适用于 Chrome 和 IE9

【英文标题】：Class:hover works on Firefox but doesn't work on Chrome nor IE9

【发布时间】：2013-02-19 16:42:56

【问题描述】：

这里的问题，我想让这个文本在鼠标悬停时旋转，这个代码在 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 */  

【参考方案1】：

您需要为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/了解需要为哪些浏览器添加前缀的属性

【参考方案2】：

使用-webkit-transition: all 0.5s Ease;