我常常处理鼠标事件背景图时为了图便捷，直接用PS切片，复制一个再用PS调整一下颜色作为鼠标经过时显示的图片，直接采用两张图片，一张作为当前一张作为经过时显示。这样做方便以及节省一点点带宽，但是弊端就是加载页面时并没有载入鼠标经过的图片（也就这里节省了），而鼠标经过时才载入图片。这样可想而知的结果就是鼠标经过时有个短暂的图片消失的情况，当浏览器缓存图片过后此情况就不会发生。

这是使用鼠标伪元素切换背景CSS -两张图片

#bt1{ background:url(bt1.jpg) no-repeat center; width:88px; height:31px;}
#bt1:link, #bt1:visited {background:url(bt1.jpg) no-repeat center; width:88px; height:31px;}
#bt1:hover {background:url(bt2.jpg) no-repeat center;width:88px; height:31px;}

页面载入时加载第一张图片（bt1.jpg），当鼠标经过按钮时加载第二张图片（bt2.jpg）

#bt2{ background:url(bt12.jpg) no-repeat 0 0; width:88px; height:31px;}
#bt2:link, #bt2:visited {background:url(bt12.jpg) no-repeat 0 0; width:88px; height:31px;}
#bt2:hover {background:url(bt12.jpg) no-repeat 0 100%;width:88px; height:31px;}

通过限制div长宽尺寸，利用定义背景图位置达到切换效果

为了改善此问题我们可以把两张图片合二为一变成一张图片，这样就能在载入页面时就载入图片，缓存图片，从而鼠标经过时即时的切换图片位置，达到鼠标经过变 化效果。

演示页面

普及一下基础常识，老鸟就无需浪费时间啦