鼠标离开后强制 gif 重新加载

Question

在我的网站上，我有几张图片在鼠标悬停时通过 GIF 动画循环，当鼠标离开图片时 return 变为静态图片。

我希望 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;
}

我将不胜感激任何解决方案，包括 Javascripts！谢谢大家:)

Answer 1

我认为 this tutorial 完全涵盖了您的情况，包括 CSS 和 Javascript 方面，即使您需要几个额外的库（jQuery 和字体太棒了）。

Answer 2

试试这个：

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

Answer 3

这是修复它的一种廉价方法，但为了解决这个问题，我这样做了：

每个 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);
}

鼠标离开后强制 gif 重新加载

Force gif to reload after mouse leave

html

javascript

css

gif