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とInternetExplorerはプレフィックスを削除しました。（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タグをサポートしていません。これは、InternetExplorer10以降でのみ正しく機能します。IE10は両方をサポートしています。

于 2012-12-24T01:27:39.267 に答える