Html 用于慢速悬停事件的精灵解决方案&；2图像

我网站上的一个按钮对OnHover的响应很慢，我不知道为什么会发生这种情况

然后单击右上角的按钮“单击快速连接”

a、 接触{
背景图片：url（“/images/Home/RapidButton2.png”）；
显示：块；
字体大小：11px；
文本对齐：居中；
宽度：165px；
高度：27px；
}
a、 联系人：悬停{
背景图片：url（“/images/Home/RapidButtonHov2.png”）；
}

问题可能是在第一次悬停时必须先下载

悬停图像，这会延迟（连接速度较慢时会有一点延迟）

试着把它变成一个精灵。即，将两个图像合并到一个较大的图像中，其中两个图像都堆叠在一起。
使用
背景位置
属性根据悬停状态移动大图像

与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;
  .................
}

可以找到一个很好的教程
您在哪个浏览器中看到这个？你试过其他图形吗？我已经在谷歌Chrome和Firefox（都在OS X上）上查看了该网站，并没有发现任何错误：
onhover
触发很好，没有延迟。请注意，我切换了两幅图像的顺序，通常你会将默认状态放在最上面；）因此背景位置也必须翻转。我尝试了这种方法，因为没有加载悬停图像，悬停没有延迟。
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;
  .................
}