html - 播放 GIF "onmouseover"，但只播放一次

Question

我的网站上有一个 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); }

Answer 1

通过将您的 JavaScript 移动到函数中并在更改 src 之后添加 removeAttribute('onmouseover') 即可轻松完成此操作。由于我没有您的图片，我只使用了在 Google 上弹出的前两个图片:

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

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

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

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

希望对您有所帮助。 ^^

编辑

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

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

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

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