CSS背景图像在悬停后消失答案

【问题标题】：CSS background image disappears after hoverCSS背景图像在悬停后消失
【发布时间】：2012-03-03 21:58:24
【问题描述】：

我在使用 Google Chrome 时遇到问题。我在 display:block; 链接上使用简单的悬停状态来仅更改悬停时的 background:url(); 属性。

谷歌浏览器显示实际的悬停变化正常，但是当我将鼠标移出该区域时，背景变为透明/消失。

这是我的 CSS：

#branding #logo a {
width: 259px;
height: 201px;
border:none;
display: block;
background:url(images/logo.png) top left;
}
#branding #logo a:hover {
background:url(images/logo_hover.png) top left;
}

实际站点在这里：http://beerblestudy.org。同样，这仅在 Chrome 中发生在我身上。有什么想法吗？

【问题讨论】：

在慢速连接上，第一次悬停需要一两秒才能加载。您应该预先加载悬停图像以避免这种情况：perishablepress.com/press/2009/12/28/…
或者，更好的是，一个精灵图像。
是的，请使用精灵进行翻转 - 现在是 2012。

标签： css image google-chrome background

【解决方案1】：

它适用于所有浏览器。尝试删除您的缓存，因为它工作正常。我建议您删除 top left 行，因为它们不是必需的

【讨论】：

嗯，我已经清除了几次缓存，但它仍然消失了。我也刚刚尝试添加top left 作为可能的解决方案。考虑指定可能会帮助 Chrome。我想如果它出现在你面前，那我没问题，哈哈。感谢您的帮助。
然后重置您的 chrome 导航数据，删除所有，因为它对我来说工作正常
我也看到它在 Chrome 中消失了。
我也看到它在 chrome 中消失了
这很奇怪，i40.tinypic.com/1zciemb.png（在 chrome 上工作的屏幕截图）???

【解决方案2】：

您的背景也在这里消失在 chrome 中。

我知道我不应该在这里说“我也是”，但这很奇怪，把我带到这里的原因与我在最近建立的网站上遇到的问题相同：http://macvillain.com - 右侧栏图像块.

我在大多数浏览器上进行了彻底的测试（不是 ie6 或 7 - 我已经将它们放逐了），并且在过去两周直到今天在 chrome 中都很好。有时清除缓存等工作一段时间然后又回来了。没看懂……

更新：

您好，我在 Google Chrome 论坛上得到了回复，上面说： "Chrome 严格使用 HTML5。验证 HTML 代码http://validator.w3.org/"

我忘记这样做了，我修复了一些无效的东西，现在一切都很好。

我建议你也这样做。

【讨论】：

【解决方案3】：

试试这个技巧：我看到一个 JQuery 插件，它可以自动下载 CSS 样式表中指定的图像。

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

【讨论】：