用前景图实现hover切换图片

最新推荐文章于 2025-04-30 15:30:03 发布

emu

最新推荐文章于 2025-04-30 15:30:03 发布

阅读量6.3k

点赞数

CC 4.0 BY-SA版权

文章标签： firefox table ie class html file

本文链接：https://blog.youkuaiyun.com/emu/article/details/1642479

本文探讨了IE浏览器中背景图片缓存问题及其引发的hover效果异常现象。通过使用前景图片替代背景图片的方法，结合CSS样式调整，有效地解决了这一难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在很多网站都用背景图片来实现hover（鼠标经过）切换图片。但是IE有个该死的bug会造成超链接的背景图片有时无法cache，因此在鼠标经过超链接图片的时候就看到哗哗一大片的http下载请求

。

这不像很多网站上描述的，是由于IE的缓存策略被设置在“每次访问此页时更新”了造成的，不管IE缓存策略如何设置，都无法彻底避免这个问题。

emu试验了一下，发现用前景图也可以实现老甘（他的域名貌似已经过期，居然没续费……）用背景图实现的类似效果，不过要多用上一些小技巧：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
    A.file{overflow:hidden;height:20px;width:20px;}
    A.file IMG{position:relative;left:-130px;top:-350px}
    A.file:hover{emu:expression(0)}
    A.file:hover IMG{left:-10px;top:-350px}

    A.file2 {text-decoration:none;color:gray}
    A.file2 span{overflow:hidden;height:20px;width:20px;}
    A.file2 span IMG{position:relative;left:-130px;top:-348px}
    A.file2:hover{color:red;height:20}
    A.file2:hover span IMG{left:-10px;top:-348px}
</style>
</HEAD>
<BODY>
one single icon : <A class="file" href="#"><img src="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif"></A>.<BR>
an icon with text:<A class="file2" href="#"><span><img src="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif"></span>test