在鼠标悬停时启动 GIF 否则暂停? [英] Start GIF On Mouse Hover and Pause Otherwise?
问题描述
所以我试图将这些图像放在我正在构建的页面的侧边栏上，这些图像是静态的，但是当您将鼠标悬停在它们的上方时，它们会以 gif 动画的形式出现.我当前的设置是让 background-image css 属性图像通常是静态 jpg，但在鼠标悬停时更改为动画 gif.这是代码，以更好地说明我的观点.
So I'm trying to have these images on the sidebar of a page I'm building that are static but when you mouseover they animate as gifs. My current setup is to have the background-image css property image be a static jpg normally but change to an animated gif on mouseover. Here's the code, to illustrate my point better.
CSS:
#segments li a.fnb {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/fnb%21-small.jpg); /*fallback*/
}
#segments li a.whhu {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/still.jpg);
}
#segments li a.fnb:hover {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif);
}
#segments li a.whhu:hover {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif);
}
我就不打扰你了，没有必要说明我的意思.
I'll spare you from the rest, it's unnecessary to make my point.
HTML:
<ul id="segments">
<li><a href="http://collabprojekt.com/tagged/fnb!" class="fnb"></a></li>
<li><a href="http://collabprojekt.com/tagged/whhu" class="whhu"></a></li>
</ul>
该站点是 http://tcptest.tumblr.com，请查看带有图像以了解其当前的工作方式.
The site is http://tcptest.tumblr.com, check out the left side bar with the images to see how it works currently.
这有效，但我唯一的问题是，对于有史以来的第一次悬停，它必须加载 gif，这会导致在加载 gif 时框变为空白的一小段时间.虽然这不是什么大问题，但看起来真的很不专业.
This works, but my only problem is that for the first hover ever, it has to load the gif and this cause a short moment where the box goes blank while it loads the gif. While this isn't a huge deal, it looks really unprofessional.
我尝试了这个想法(link) 使用 JS，但它失败了我.
I tried this idea (link) of using JS, but it failed me.
所以我想我的问题是:有没有更好的方法用 CSS 甚至任何其他语言来做到这一点，这样我就不会得到这个随机的空白时刻?
So I guess my question is: is there a better way to do this with CSS or even any other language so that I don't get this random blank moment?
推荐答案
您想学习的是如何预加载图像.在 Google 上搜索HTML 预加载图片"会让你继续......
What you want to learn is how to pre-load images. A Google search for "HTML preload images" will get you going...
这个链接似乎有一个使用 javascript 的好主意.
This link seems to have a good idea using javascript.
这篇关于在鼠标悬停时启动 GIF 否则暂停?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
