Question

我尝试了很多不同的代码，但我似乎无法使其中的任何代码工作，或者我不确定将代码放在何处。（我是通过tumblr主题的html来做到这一点）

我正在尝试在悬停时设置标题gif的动画。我有一个静态gif http://i.imgur.com/K3sHfIF.gif＆amp;一个动画的http://i.imgur.com/fbiY7A0.gif。

有人可以告诉我如何做到这一点以适应tumblr。

Answer 1

您无法在悬停时为gif文件设置动画;或者开始悬停动画等。

这里你可以做的是在主页面上添加一个图像，并在有悬停事件时进行更改。

这是一个例子

<img src="/link_of/image.png" alt="photo" class="header" />

然后jQuery代码将采取行动并处理鼠标悬停事件

$('.header').hover(function () {
   $(this).attr('src', '/link_of/animation.gif');
});

现在，当你将鼠标悬停在元素上时。它会在悬停事件时获得其更改的source属性。请记住始终在项目中包含jquery源文件。

Answer 2

尝试在网站上创建一个div（内置静态gif）。然后，使用onmouseover调用将div的innerHTML设置为动画gif，并使用onblur调用将其设置回静态。

HTML：

<div id="div_name" onmouseover="showAnimated();" onblur="showStatic();">
    <img src="source of static gif">
</div>

JavaScript的：

function showAnimated(){
    document.getElementById('div_name').innerHTML = "<img src=\"source of animated gif\">";
}
function showStatic(){
    document.getElementById('div_name').innerHTML = "<img src=\"source of static gif\">";
}

希望有所帮助！

悬停时动画gif（tumblr html）

2 个答案: