css3 变换图像悬停在 firefox 中

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 放在两个选择器中，但我很确定它只需要在马克工作室

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，这将是一个非常糟糕的设计。)