0 
    .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

4

2 回答 2

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

于 2012-12-24T01:25:42.530 回答
0

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

于 2012-12-24T01:27:39.267 回答