当我们定义任何CSS的悬停状态时......＆amp;在悬停状态我们改变background:url('image path');这个图像是预装的将在元素的第一个悬停下载..如果那样那么如何预加载...我知道javascript预加载图像..是打算工作......
答案 0 :(得分：5)
如果你试图避免让你的悬停状态图像加载它们，它们会被徘徊，而不是预加载它们，为什么不创建同时保存正常和悬停图像的精灵？这样您就可以确保已经加载了所有悬停状态图像，同时减少了所有请求的开销。您需要做的唯一事情是设置background-position属性的值。
关于你的第一个问题，我想找到答案的最好方法是使用两个大图像（一些壁纸可以工作）并自己测试，虽然我怀疑图像只会在鼠标时加载是在原始图像上，因为那是在执行代码的时候。
希望这有帮助！
答案 1 :(得分：5)
如果你有div身高20px，并且希望在悬停时更改背景图片，请使用包含无悬停和悬停图片的图片， - 悬停在顶部，悬停图像在底部。这两个部分应该是你的div的高度，在这种情况下，20px。然后，首先将CSS background-position设置为0px 0px（左上角）。这是默认值（无悬停）。
当用户将鼠标悬停在div上时，请将background-position设置为0px -20px（20px以上）。这会将背景图像向上移动20px，显示精灵的下半部分，即悬停图形。当从div中移除鼠标时，精灵将回落到它的原始位置。
<强> CSS：
.hoverDiv /* Normal state */
{
background: url('images/img.png');
background-position: 0px 0px;
}
.hoverDiv:hover /* Hover state */
{
background-position: 0px -20px; /* Move background up by 20px, hiding the top image */
}
如果你有一个不同高度的div，只需用div的高度更改20px位。
如果您的精灵并排而不是彼此重叠，请使用background-position: -20px 0px;代替0px -20px;移动X轴。当然，你也可以积极地移动背景。
希望这有帮助，
詹姆斯
答案 2 :(得分：2)
您可以使用css sprites
答案 3 :(得分：0)