在悬停css上重新启动动画gif答案

【问题标题】：restart animated gif on hover css在悬停css上重新启动动画gif
【发布时间】：2019-08-07 09:58:08
【问题描述】：

我有一个动画 gif 作为背景图像，当您悬停链接时会激活它。但是一旦激活，即使您没有悬停链接，即使它不可见，它也会继续播放。每次将鼠标悬停在链接上时，是否有任何方法可以仅使用 css 重新启动 gif？

这是我目前的代码

<div id="zichtbaar">
<a href="?link?">Zichtbaar<span></span></a>

和 CSS

#zichtbaar a span { 
display: none; 
background-image: url("background.gif");
background-size: contain;
background-position: fixed;
background-repeat: no-repeat;
position: fixed;
width: 100%;
height: 100%;
left: 25%;
top: 35px;
z-index:-9999;                                              
#zichtbaar a:hover span { 
display:block;  
}

【问题讨论】：

如何在:hover 上激活？我没有看到任何代码。

标签： html css

【解决方案1】：

我会创建第二张图片，仍然是.png 格式，并会更改:hover 上的图片来源，以便当用户悬停图片时，来源是动画 gif，而当他鼠标移出，源将替换为静止图像，这将在视觉上重置图像。像这样的：

#zichtbaar a span { 
background-image: url("StillImageOfTheGif.png");
}

#zichtbaar a span :hover { 
background-image: url("background.gif");
}

此外，我会在静止的.png 图像中添加一个带有隐藏属性的<img> 元素，以便在页面加载时加载图像，从而避免用户触发悬停时的延迟。

根据 cmets 和 javascript 版本进行编辑。

<a id="zichtbaar">Zichtbaar</a>
<img id="DasBild" src="https://jepen84.github.io/github.io/images/static_ice.gif" />

function Start() {

    $('#zichtbaar').on({

    mouseenter: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/ice_t.gif') },
    mouseleave: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/static_ice.gif') }

  });
}

$(Start);

【讨论】：

我试过了，但它不会重新启动动画。动画是一段被写出来的文本，当您第一次将鼠标悬停在链接上时，它会开始播放动画，但是当您再次悬停在链接上时，您只需恢复动画时间线，从您将鼠标悬停在链接上第一次（如果这有意义的话）。我需要的是每次悬停链接时重新启动动画。不过非常感谢您的建议。
你能把它放在一个 jsFiddle 里吗？使用 Imgur 拍摄 2 张图片。
jsFiddle 图片在 Github 但应该可以访问
好的，看看这个问题stackoverflow.com/questions/4717117/…让我知道你是否可以让它为你工作，否则我明天下午再看。
太完美了！！谢谢。我在 a id 中写了，而不仅仅是。这似乎把事情搞砸了。非常感谢。

【解决方案2】：

你需要使用hover

#zichtbaar a span :hover {
    background-image: url("background.gif");

【讨论】：

【解决方案3】：

非常感谢@frenchie 的所有帮助。这最终完全符合我的要求：

    <a id="zichtbaar" href="link">Zichtbaar</a>

function Start() {

$('#zichtbaar').on({

mouseenter: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/ice_t.gif') },
mouseleave: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/static_ice.png') }

  });
}

$(Start);

【讨论】：