提交按钮在悬停时消失，然后重新出现答案

【问题标题】：Submit button disapears on hover and then reapears提交按钮在悬停时消失，然后重新出现
【发布时间】：2009-05-13 17:04:31
【问题描述】：

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

【问题讨论】：

你能发布你正在使用的 HTML 和 CSS 吗？

标签： javascript html css button

【解决方案1】：

这只是在初始页面显示/悬停吗？

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

为避免这种情况，两个按钮状态都应存储在一个文件中。然后，您只需要调整 background-position 属性以显示正确的一半图像以适应其当前状态。

这是一个粗略的例子（注意 button.png 包含两种图像状态并且是 40 像素高）：

button {
background-image: url(button.png);
width: 60px;
height: 20px;
background-position: 0 0;
}

button:hover {
background-position: 0 -20px;
}

【讨论】：

看看这篇文章：smashingmagazine.com/2009/04/27/…
存储在单个文件中？你的意思是CSS文件？两种状态都在同一个 CSS 文件中。
我已经编辑了我的答案以澄清并提供了一个基本示例。
@Graham：两种状态的图像在同一个图像文件中 - 然后，如 BrynJ 的示例所示，将该文件的特定部分显示为图像。这是一种称为 CSS spriting 的技术，通常用于从服务器中拉出一堆图标等（避免大量小文件的请求开销，并最大限度地提高缓存效益）。
@Perspx - 不错的链接，它显示了您可以将概念扩展多远。

【解决方案2】：

也许，您可以使用与上述 Bryn 的回答类似的intent 技术，尽管不是执行。

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

我提到的相似之处是让两个图像都出现在文档上，以避免悬停闪烁。在按钮悬停时，跨度的背景图像将消失，并显示悬停状态，而不必按需加载。

好处是，尽管我在上面指定了height/width，但这种技术将适用于动态调整大小，而不是依赖于固定宽度的图像大小（或者它是您的设计允许的那样流畅）是）。

【讨论】：

-1 表示额外的 HTTP 请求。对于透明图像将无法正常工作。
@Josh - 确实有第二个 http 请求，但我发现额外几 kb 的成本被更流畅的设计所带来的好处所抵消。而且，据我所知，它回答了所提出的问题。不过各有千秋。
...透明图片问题大概是因为上面样式的span没有background-colour。这……不难解决。编辑答案以适应。

【解决方案3】：

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

示例：Using Sprite Images with INPUT for a Hover Effect

【讨论】：