Javascript “提交”按钮在悬停时消失，然后重新出现

所以我使用CSS:hover来替换提交按钮的背景。当我将鼠标移到按钮上时，旧的背景图像消失（因此看起来什么都没有）片刻，然后与新的背景一起重新出现。我认为按钮图像文件可能太大了，但它只有1.4kb。有没有办法防止这种情况，缓存或预加载，或者类似的事情？

这只是在初始页面显示/悬停时发生的吗

这将是因为图像文件仅在请求时加载-即悬停操作

为了避免这种情况，两个按钮状态都应该存储在一个文件中。然后，您只需要调整“背景位置”属性，以显示图像当前状态的正确一半

下面是一个粗略的示例（请注意，button.png包含两种图像状态，高40像素）：

---

这是因为“悬停”图像在显示之前需要时间下载。为了防止这种情况，可以使用精灵图像技术

---

示例：

您可能可以使用一种与上面Bryn的答案在意图上类似（尽管不是执行）的技术

.button {background-image: url(img/for/hover-state.png)
         background-position: top left;
         background-repeat: repeat-x;
         background-color: #fff;
         height: 1.5em;
         width: 5em;
}

.button span
        {background-image: url(img/for/non-hover-state.png);
         background-position: top left;
         background-repeat: repeat-x;
         background-color: #000;
         height: 1.5em;
         width: 5em;
}

.button:hover span
        {background-color: transparent;
         background-image: none;
}

我提到的相似之处在于，为了避免悬停闪烁，文档中同时存在两个图像。悬停按钮时，跨度的背景图像将消失，并显示悬停状态，而不必按需加载

---

好处是，尽管我在上面指定了

高度

/

宽度

，但这项技术可以用于动态调整大小，而不依赖于图像的固定宽度大小（或者它是您的设计所允许的最流畅的大小）。

您可以发布您正在使用的HTML和CSS吗？看看这篇文章：存储在单个文件中？你是说CSS文件吗？两个州都在同一个CSS文件中。我编辑了我的答案以澄清问题，并提供了一个基本示例。@Graham：两个州的图像都在同一个图像文件中-然后，如BrynJ的示例所示，将该文件的特定部分显示为图像。这是一种被称为CSS spriting的技术，通常用于从服务器上拉下一堆图标等（避免大量小文件的请求开销，并最大限度地提高缓存的好处）。@Perspx-nice link，它显示了您可以将概念扩展到多大程度。-1表示额外的HTTP请求。对于透明图像将无法正常工作。@Josh-没错，还有第二个http请求，但我发现额外几kb的成本被更流畅的设计所抵消。而且，据我所知，它回答了这个问题。但是每个都有自己的…透明图像问题可能是因为上面样式的

span

没有

背景色。这…不难解决。编辑答案以适应。
.button {background-image: url(img/for/hover-state.png)
         background-position: top left;
         background-repeat: repeat-x;
         background-color: #fff;
         height: 1.5em;
         width: 5em;
}

.button span
        {background-image: url(img/for/non-hover-state.png);
         background-position: top left;
         background-repeat: repeat-x;
         background-color: #000;
         height: 1.5em;
         width: 5em;
}

.button:hover span
        {background-color: transparent;
         background-image: none;
}