播放 GIF "onmouseover"，但只播放一次答案

【问题标题】：Play GIF "onmouseover", but play only once播放 GIF "onmouseover"，但只播放一次
【发布时间】：2020-12-13 18:21:18
【问题描述】：

我的网站上有一个 GIF，我希望它只在您将鼠标悬停在它上面时播放，但只播放一次。所以我不希望用户能够再次触发事件，除非他们刷新页面。有人知道怎么做吗？

到目前为止，我拥有的是一个静态图像（gif 的第一帧），在鼠标悬停时，它会变成一个不循环的 gif。如果我再次将鼠标放在它上面，它会重复动画，这是我不想要的。

HTML

<img class="footer" src="images/website footer static.jpg" onmouseover="this.src='images/website footer.gif';"

CSS

.footer {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:10px;
box-shadow: 0px 5px 8px 0px rgba(50, 50, 50, 0.75); }

【问题讨论】：

一种方法是在触发后从图像元素中删除 onmouseover 事件。
好的，你知道怎么做吗？

标签： html css

【解决方案1】：

这很容易通过将 JavaScript 移动到函数中并在更改 src 后添加 removeAttribute('onmouseover') 来完成。因为我没有你的图片，所以我只使用了谷歌上弹出的前两张：

function playGIF(elm) {
    elm.src = 'http://www.image-mapper.com/photos/original/missing.png?1263880893';
    elm.removeAttribute('onmouseover');
}

.footer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:10px;
    box-shadow: 0px 5px 8px 0px rgba(50, 50, 50, 0.75);
}

&lt;img class="footer" src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" onmouseover="playGIF(this);" /&gt;

JSFiddle：http://jsfiddle.net/mavpx438/

如果您查看开发人员工具中呈现的img 的代码，您会注意到在将鼠标移到图像上之前，onmouseover 属性存在，但是当您移到它上面时，图像更改后立即删除img 标记的onmouseover 属性。这将防止图像在随后的鼠标悬停时重新加载。

我希望这会有所帮助。 ^^

编辑

由于您的“回答问题”和我的回复评论似乎已被删除，我将在此处添加我的解释。

您曾询问过仅使用 HTML/CSS。虽然我们使用伪:hover 来实现鼠标悬停效果，但它会将显示恢复到其原始状态，而不会进行更改。更改呈现代码的唯一方法是您需要做的永久更改，即通过脚本编写。

这就是语言的工作原理。 HTML5 对我们可以做的事情有了很大的改进，但它仍然是一个固定的渲染代码。呈现该代码后，您需要一些东西来进行更动态的操作。高级 HTML5 将允许这些方面的一些功能，但我们谈论的是高端开发，它将依赖于 JavaScript。也许在 HTML6 中我们会看到动态渲染，但我对此表示怀疑。

我希望这些附加信息有助于澄清为什么 HTML/CSS 选项不是一个。

【讨论】：

【解决方案2】：

试试这个Fiddle使用jquery更改悬停属性，然后在悬停使用unbind禁用悬停效果

$('.footer').hover(function () {
    $(this).attr("src", "http://www.thiefmissions.com/targa/fan.gif");
   $(this).unbind('mouseenter mouseleave');
});

.footer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:10px;
    box-shadow: 0px 5px 8px 0px rgba(50, 50, 50, 0.75);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<img class="footer" src="images/website footer static.jpg" ;>

【讨论】：