強制gif在鼠標離開後重新加載

Question

在我的網站上，我有幾個圖像在鼠標懸停時通過GIF動畫循環，並在鼠標離開圖片時返回到靜態圖像。

我希望gif在鼠標懸停時從第一幀播放。但是，如果我將鼠標懸停在圖片上，將鼠標移開並再次懸停，圖像將轉到從最後一幀開始繼續的gif。

這裏是我的HTML代碼：

<img id="menugif"> 

我的CSS：

#menugif 
{ 
    padding-top: 15px; 
    height: 115px; 
    width: 125px; 
    content:url(../images/Hulk.png); 
    float: left; 
} 
#menugif:Hover 
{ 
    cursor:pointer; 
    content:url('../images/Hulk.gif'); 
    float: left; 
} 

我會很感激的任何解決方案，包括Javascript角！謝謝大家:)

Answer 1

這是解決它一種廉價的方式，但要解決我這樣做：

每個HTML GIF都有自己的ID：

<a id="single_image1" href="#"><img id="menugifHulk" src="images\hulk.png"></a> 

每其中之一有它自己的風格，如下所示：

#menugifHulk 
     { 
      padding-top: 15px; 
      height: 115px; 
      width: 125px; 
      float: left; 
     } 

然後每個元素都有自己的JavaScript：

var img = document.getElementById('menugifHulk'); 
img.addEventListener('mouseleave', function() { 
    var imageUrl = img.src; 
    img.src = ""; 
    img.setAttribute('src', 'images/Hulk.png'); 
}, false); 
img.addEventListener('mouseover', function() { 
    img.setAttribute('src', 'images/Hulk.gif'); 
}, false); 

的Java是在這樣一個功能：

function GifReset() 
{ 
    var img = document.getElementById('menugifHulk'); 
    img.addEventListener('mouseleave', function() { 
     var imageUrl = img.src; 
     img.src = ""; 
     img.setAttribute('src', 'images/Hulk.png'); 
    }, false); 
    img.addEventListener('mouseover', function() { 
     img.setAttribute('src', 'images/Hulk.gif'); 
    }, false); 
} 

Answer 2

我認爲this tutorial完全覆蓋了你的情況，無論是CSS還是Javascript方面，即使你需要一些額外的庫（jQuery和Font Awesome）。

Answer 3

試試這個：

var img = document.getElementById('menugif'); 
img.addEventListener('mouseleave', function() { 
    this.style.content = this.style.content; 
}, false);