我是一名有用的助手,可以为您进行文本翻译。以下是需要翻译的内容:
我会为你省略其余部分,这对于阐明我的观点是不必要的。
HTML:
网站链接是http://tcptest.tumblr.com,查看左侧带有图片的边栏以了解当前的工作方式。
这个方法可行,但我的唯一问题是,在第一次悬停时,它必须加载gif,这会导致盒子在加载gif时变空白的短暂时刻。虽然这不是一个很大的问题,但看起来非常不专业。
我尝试了这个想法 (link) 使用JS,但失败了。
所以我的问题是:有没有更好的方法用CSS或其他任何语言来做到这一点,以便我不会得到这个随机的空白时刻?
所以我正在尝试在构建的页面的侧边栏上放置这些静态图像,但当您将鼠标悬停在上面时,它们会作为gif动画播放。 我目前的设置是将 background-image
css属性图片通常设置为静态jpg,但在鼠标悬停时更改为动画gif。 以下是代码,以更好地说明我的观点。
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);
}
我会为你省略其余部分,这对于阐明我的观点是不必要的。
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,查看左侧带有图片的边栏以了解当前的工作方式。
这个方法可行,但我的唯一问题是,在第一次悬停时,它必须加载gif,这会导致盒子在加载gif时变空白的短暂时刻。虽然这不是一个很大的问题,但看起来非常不专业。
我尝试了这个想法 (link) 使用JS,但失败了。
所以我的问题是:有没有更好的方法用CSS或其他任何语言来做到这一点,以便我不会得到这个随机的空白时刻?
IMG
元素本身-它们纯粹用于缓存悬停图像。将IMG
元素放置在页面上后,无需进行其他操作。您的CSS将按原样工作,但将减少悬停延迟。 - MrWhiteimg
标签本身虽然最初需要缓存动画图像,但在鼠标悬停效果中根本不使用。你的CSS :hover已经完成了这个工作。就像你所说的,只有第一次悬停会出现问题,因为在第一次悬停后,图像已经被缓存在浏览器中了。页面上的img
标签实际上为您完成了这个第一次悬停-它缓存了动画图像。 - MrWhite