Question

我有一个动画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;  
}

Answer 1

您需要使用hover

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

Answer 2

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

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

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

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

根据评论和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);

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

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

3 个答案: