CSS Image hover Problem in Google Chrome

Question

I have a very strange image hover problem in Google Chrome.

When I hover the mouse over the menu, I get my background image in Mozilla and IE, but not in Chrome.

I used the following CSS script for the menu item.

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

It's working fine with Internet Explorer and Mozilla. While Its not showing up the background image for the menu on hovering in chrome. Can anyone Help me please?

I suggest you upload your page to jsfiddle , or share the link of the site so people can look at the problem properly. — Blowsie, Dec 14 '10 at 14:56

score 0 · Answer 1 · edited May 23 '17 at 12:24

You are simply having the same issue as on this thread: chrome does not render gif background image

GIF images are not render correctly by chrome if they are applied on hover (ie. img:hover).

So you have a couple of options:

If your images are not animated: change the format of your images
If your images are animated: use a work around, see answers of question chrome does not render gif background image

score 0 · Answer 2 · answered Feb 17 '11 at 06:26

Not too late for me to answer, I hope?

This is happening because display:block; is being triggered on hover, which WebKit doesn't seem to like. It should work if you move the display:block; property from ul.sb_menu li a:hover, ul.ex_menu li a:hover to ul.sb_menu li a, ul.ex_menu li a

While you're at it, it would probably make sense to move width:200px; and height:25px; to the same place as well. This shouldn't affect how it appears in IE, Firefox or Opera, by the way.

CSS Image hover Problem in Google Chrome

2 Answers2