CSS背景图片在悬停后消失

Question

我在谷歌浏览器中遇到了问题。我在一个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浏览器中。有什么想法吗？

- dmoz

---

在慢速连接下，第一次悬停需要一两秒钟才能加载。您应该预加载悬停图像以避免这种情况：http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/ - abraham

或者，更好的是，一个精灵图像。 - DA.

是的，请使用精灵图来实现鼠标悬停效果 - 现在已经是2012年了。 - Marty

Answer 1

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

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

- Christie English

Answer 2

在所有浏览器中都可以正常工作。尝试删除缓存，因为它正常工作。我建议您删除top left这些行，因为它们不是必需的。

- Luis

---

嗯，我已经清除了缓存好几次，但它仍然消失了。我刚刚尝试添加“top left”作为可能的解决方案。我认为指定可能会帮助Chrome。如果它对你显示正常，那么我就没问题了，哈哈。谢谢你的帮助。 - dmoz

那么重置您的Chrome导航数据，删除所有内容，因为它对我来说运行良好。 - Luis

我也在 Chrome 中看到它消失了。 - abraham

我也看到它在Chrome中消失了。 - Cody Bonney

很奇怪，http://i40.tinypic.com/1zciemb.png（在Chrome上工作的屏幕截图）??? - Luis

一段时间没有在网站上工作，现在Chrome中的滑过效果正常了。可能是缓存问题。感谢所有的帮助！ - dmoz

Answer 3

这里在Chrome中也出现了你的背景消失。

我知道我不应该在这里“我也是”，但这很奇怪，而且我来到这里的原因是我最近建立的一个网站上出现了同样的问题：http://macvillain.com - 右侧栏图像块。

我在大多数浏览器上进行了彻底测试（不包括ie6或7 - 我已经把它们放逐了），在过去两周中在Chrome上一切正常，直到今天。有时清除缓存等操作可以暂时解决问题，然后问题又出现了。我搞不懂...

更新：

嗨，我在Google Chrome论坛上得到了一个答案，说： “Chrome严格使用HTML5。验证HTML代码 http://validator.w3.org/”

我忘记做这个了，有几个无效的地方，我修复了它们，现在一切都好了。

我建议你也这样做。

- George