Google Chrome 中的 CSS 图像悬停问题

Posted 2023-03-06

【中文标题】Google Chrome 中的 CSS 图像悬停问题

【英文标题】：CSS Image hover Problem in Google Chrome

【发布时间】：2011-05-25 07:36:29

【问题描述】：

我在谷歌浏览器中有一个非常奇怪的图像悬停问题。

当我将鼠标悬停在菜单上时，我在 Mozilla 和 IE 中获得了我的背景图片，但在 Chrome 中却没有。

我为菜单项使用了以下 CSS 脚本。

.content_resize  padding-right:0; padding-top:16px; width:930px;background-color:#fff; 
.content .mainbar  float:left; width:630px;
.content .newstick  float:center; width:650px;
.content .mainbar img  margin-bottom:24px; padding:4px; border:1px solid #b7b7b7; background-color:#fff;
.content .mainbar img.fl  float:left; margin-right:12px;
.content .mainbar .article, .content .sidebar .gadget  margin:0; padding:0 0 16px 0;
.content .sidebar  float:right; width:276px;
ul.sb_menu, ul.ex_menu  margin:0; padding:0; list-style:none; color:#959595;
ul.sb_menu li, ul.ex_menu li  margin:0; 
ul.sb_menu li  padding:4px 0; border-bottom:1px solid #e3e3e3; width:220px;
ul.ex_menu li  padding:4px 0 8px;
ul.sb_menu li a, ul.ex_menu li a  color:#5f5f5f; text-decoration:none; margin-left:-16px; padding-left:5px;

ul.sb_menu li a:hover, ul.ex_menu li a:hover  color:#FFFFFF; font-weight:bold; display:block; width:200px ; height:25px; background:url(images/menu_bg.gif)  no-repeat left top;

ul.sb_menu li a:hover  text-decoration:underline;
ul.ex_menu li a:hover  text-decoration:none;
.content .scroll   float:left; background:url(images/scroll_bg.gif)  no-repeat left top;  display:block; margin-left:35px; height:200px; width:180px;  OVERFLOW: hidden;background-color:transparent; 

它在 Internet Explorer 和 Mozilla 上运行良好。虽然它没有显示悬停在 chrome 中的菜单的背景图像。谁能帮帮我？

【问题讨论】：

您能发布一个指向该页面的链接吗？

我建议你将页面上传到 jsfiddle ，或者分享网站的链接，以便人们可以正确查看问题。

或者不...我们将由您决定。

【参考方案1】：

希望我回答不会太晚吧？

发生这种情况是因为 display:block; 在悬停时被触发，而 WebKit 似乎并不喜欢。如果您将display:block; 属性从ul.sb_menu li a:hover, ul.ex_menu li a:hover 移动到ul.sb_menu li a, ul.ex_menu li a，它应该可以工作

当您使用它时，将width:200px; 和height:25px; 也移动到同一个位置可能是有意义的。顺便说一句，这不应该影响它在 IE、Firefox 或 Opera 中的显示方式。

【参考方案2】：

您只是遇到了与此线程相同的问题：chrome does not render gif background image

如果将 GIF 图像应用于悬停（即 img:hover），则 chrome 无法正确呈现它们。

所以你有几个选择：

如果您的图片不是动画：更改图片格式 如果您的图像是动画的：使用变通方法，请参阅问题chrome does not render gif background image 的答案