zoukankan      html  css  js  c++  java
  • 用前景图实现hover切换图片

    现在很多网站都用背景图片来实现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 : 
    <class="file" href="#"><img src="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif"></A>.<BR>
    an icon with text:
    <class="file2" href="#"><span><img src="http://www.blogjava.net/images/blogjava_net/emu/1359/o_button.gif"></span>test</A>
    </BODY>
    </HTML>

     不用背景图的一个代价就是,再也不能css裸奔了。twinsen一定要讲这是个人品问题了。有的时候,要对付IE这样人品不好的平台,牺牲一点人品来换取一点性能上的优化,并不是不值得考虑的吧?

    在Firefox下面比较郁闷,必须要display:block才能实现overflow的效果,试了下display:table等table族的样式,都没有办法真正的overflow。
     
  • 相关阅读:
    转:mac下安装homebrew
    jdk1.7下载路径
    转: Mac 使用ADT的问题
    转:mac下安装Sublime Text
    转: SVN和Git的一些用法总结
    转: SVN使用教程总结(图文丰富,相当详细)
    转:Tortoise SVN 版本控制常用操作知识
    Android Java混淆(ProGuard)
    转:美团Android资源混淆保护实践
    【IPC进程间通讯之三】内存映射文件Mapping File
  • 原文地址:https://www.cnblogs.com/stonehuang/p/6603204.html
Copyright © 2011-2022 走看看