Question

    .mark.studio{
       background: url(../images/studio_icon.png) no-repeat;
       -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out; 
       -ms-transition: all .3s ease-in-out; 
       height: 50px;
       width: 50px;
       z-index:103 !important;
    }

    .mark.studio:hover{
       -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out; 
      -ms-transition: all .3s ease-in-out; 
       background: url(../images/studio_icon-hover.png) no-repeat;
       z-index:103 !important;

}

当这个css悬停时，图像从原始图像变形到悬停图像，给出了非常酷的效果，在firefox和IE9中我只是更换了悬停图像。我把-webkit-transition放在两个选择器中，但我很确定它只需要进入 .mark.studio

Answer 1

指定transition的无前缀版本; Firefox和Internet Explorer删除了前缀。（请注意，它是Internet Explorer 10 ; IE9不支持transition。）

.mark.studio {
    background: url(../images/studio_icon.png) no-repeat;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out; 
            transition: all .3s ease-in-out; 
    height: 50px;
    width: 50px;
    z-index: 103 !important;
}

.mark.studio:hover {
    background-image: url(../images/studio_icon-hover.png);
}

我冒昧地将z-index和transition从:hover州撤下;再次添加它们毫无意义。（除非你有另一个z-index并!important覆盖它，这将是非常糟糕的设计。）

Answer 2

Internet Explorer 9不支持-ms-transition标记，它只能在Internet Explorer 10及更高版本上正常运行。 IE10支持两者。

css3转换图像悬停在firefox中

2 个答案: