CSS3在Firefox

.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懸停圖像從原來的圖像變形的圖像懸停給人一種非常酷的效果，在火狐和IE9我只是得到一個懸停圖片替換。我把這兩個選擇器中的-webkit轉換，但我很確定它只需要在 .mark.studioCSS3在Firefox

來源

2012-12-24 Alex Borsody

指定transition的前綴版本; Firefox和Internet Explorer刪除了前綴。（請注意，它是Internet Explorer的，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-24 01:25:42 Ryan

有趣，我取代在這裏（在藍色星懸停）和仍然沒有過渡http://wanderfest.com/ –

也如果Firefox下降前綴爲什麼你在代碼 –

@alex_b離開-moz：啊，對不起，這是另一回事。只有Webkit可以像這樣轉換圖像;你需要兩張圖片。我留下了舊版Firefox的前綴。 – Ryan

Internet Explorer 9的不支持-MS-過渡標籤，它只是正常工作在Internet Explorer 10和向上。 IE10支持兩者。

來源

2012-12-24 01:27:39

如果IE9中不存在前綴，IE9如何刪除前綴？我說IE10放棄了它，它做到了。 :) – Ryan

是的，這就是我的意思！它不支持它，不像你原來未編輯的答案，這是我當時正在寫的，這使得它認爲它會在IE9中工作，你從代碼中刪除了前綴。順便說一句，IE10 * DOES *支持前綴。它以任何方式工作。 – 2012-12-24 01:32:01

它支持前綴，但它也丟棄了前綴。我只是評論了爲什麼我認爲它在Firefox上不起作用，但我錯過了它正在轉換'background-image'這一事實，無論在哪種瀏覽器上都無效。沒關係！ :) – Ryan

回答

相關問題