菜單上懸停

Question

gif動畫我有這樣的HTML代碼：

<ul id="menu"> 
    <li id="index1"> 
     <a href="#index1"><span class="link">index1</span></a> 
    </li> 
    ... 
</ul> 

這個CSS樣式：

#menu > li#index1 a{ 
    background: url(img/menu_index_out.gif) no-repeat; 
} 
#menu li#index1{ 
    background: url(img/menu_index.png) no-repeat; 
} 
#menu > li#index1 a:hover{ 
    background: url(img/menu_index_in.gif) no-repeat; 
} 
... 
#menu .link{ 
    display:none; 
} 

但* in.gif和* .out.gif動畫正確只適用在Opera（11.61） 但是，當我在Chrome（17.0.963）和IE9中測試它時，動畫只播放一次，然後鏈接的行爲就像懸停更改而不動畫。

有沒有一種方法可以創建動畫GIF懸停只用CSS（和HTML），可以在大多數瀏覽器上工作？

Answer 1

是的。當人員按住按鈕並將其刪除時，您可以使用javascript在按鈕內部創建一個新的<img /> -element。但這不是一個好方法。