A：懸停（帶ID）背景圖像過渡不工作在Firefox和即

Question

我有一些標誌過渡懸停，但我總是用鉻測試（是的，我搞砸了）所以我只是測試它在ff &也就是說，它不工作（我有最新版本）

這裏是我的小提琴http://jsfiddle.net/r6qZw/

這裏是HTML

<a id="facebook" href="http://facebook.com"></a> 

和CSS

#facebook { 
float: left; 
height: 40px; 
width: 40px; 
background-image: url(http://i.imgur.com/2lAKpSi.jpg); 
background-repeat: no-repeat; 
background-position: center center; 
-o-transition: all 0.3s linear; 
-moz-transition: all 0.3s linear; 
-khtml-transition: all 0.3s linear; 
-webkit-transition: all 0.3s linear; 
-ms-transition: all 0.3s linear; 
transition: all 0.3s linear; 
} 

#facebook:hover { 
background-image: url(http://i.imgur.com/L7Jmol5.jpg); 
} 

我知道這個解決方案很簡單，但我無法做到。當我刪除背景圖像，只是使用顏色，它的作品，但使用背景圖片只是停止動畫。我仍然得到第二個圖像，但它不會與動畫進行轉換。我也嘗試給父母的元素（如着名的「ul李a」等）

有人可以幫助noob出？

Answer 1

background-image不是可轉換財產（除梯度，而不是在Chrome支持 - IE支持它雖然！）

是Chrome瀏覽器可以轉換圖像爲你簡直就是標準的擴展，這一事實。如果你快速移動你的鼠標並反覆移動鼠標，看起來有多可怕 - 儘管如此，普通的轉換是平滑的，但圖像的「轉換」是可怕的。