logo标签列表

谷歌浏览器中CSS图像悬停问题

cssgoogle-chromewebkithover
3

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

当我将鼠标悬停在菜单上时，在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中悬停时菜单背景图像未显示。请问有谁能帮忙解决？

8
请问您能否提供该页面的链接？ - Matt Asbury
3
我建议你将你的页面上传到JSFiddle，或者分享该网站的链接，这样人们就可以更好地查看问题。 - Blowsie
或者不……我们会把决定留给你。 - Trufa
2个回答
0

现在回答还不晚，希望可以吗？

这是因为触发了 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 中的显示效果。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接