用于慢速OnHover事件的Sprite解决方案＆amp; 2张图片

Question

我网站上的其中一个按钮对OnHover的响应很慢，我不知道为什么会这样。

http://davincispainting.com然后点击右上角的按钮“点击快速连接”

<div id='contact-form'>
    <a class="contact" href="#"></a>
</div>

a.contact {
background-image: url("/images/Home/RapidButton2.png");
display: block;
font-size: 11px;
text-align: center;
width: 165px;
height: 27px;
}

a.contact:hover {
background-image: url("/images/Home/RapidButtonHov2.png");
}

Answer 1

问题可能是首先悬停时必须首先下载hover图像，这会延迟（慢速连接时）。

尝试将其设为精灵。 IE浏览器。将两个图像合并在一个较大的图像中，其中两个图像都被堆叠。 使用background-position属性根据悬停状态移动大图像。

像RapidButton-sprite.png一样：

和css：

a.contact {
  background-image: url("/images/Home/RapidButton-sprite.png");
  background-position:left bottom; // or 0px -27px;
  .................
}

a.contact:hover {
  background-position:left top; // or 0px 0px;
  .................
}

找到一个很好的教程 here