Situation: Got a div with buttons images. Div needs to fadeIn on hover. Works in all browsers, except Internet Explorer. When I give the div a background color it suddenly works.
Check: http://ListAndPlay.com , top left are the controls.
The hover won't work in IE, try to add a background color to #buttons and it suddenly works.
Question: What is the reason for this? How to fix this properly?
I recently ran in to this problem also. I also solved it by adding a 1 by 1 px transparent background image to the hover element. I felt like taking a shower afterwards.
I had this issue just today making a transparent overlay div appear when hovered on. IE9 wouldn't activate hover until the mouse was over the text content of the overlay. Worked fine on Chrome and FF4. I didn't try the transparent image workaround, but this seemed to work just fine: rgba(0,0,0,0). Weird...
My solution is to set a background color on the element you need to hover, then use the CSS opacity property to hide it. A fallback is provided for IE in the form of a filter.
.element {
background-color: #fff;
opacity: 0;
filter: alpha(opacity=1);
}
This solution doesn't require a transparent PNG, and unlike the rgba solution it works in older versions of IE.
This is due to has layout. Using position:relative will give the same result without use of a unwanted background image.
I encountered the same issue. For me, the problem seemed to be related to using html5 elements (e.g. <footer> and header) in ie8, and forgetting to use html5shiv to add support for those elements for older browsers.
In this case, adding the html5shiv solved the problem. None of the other proposed solutions had any effect.
I've got the same problem with IE8 using HTML5. My solution was inspired by Herman's. I set a background image and then I'm creating background from non-existing part of it. Basically, I'm asking the browser to display something that is beyond image's dimensions.
background: url(myimage.png) 300px 0px no-repeat;
To avoid unnecessary traffic it can be website's sprite or any other valid image that it's already being used on the page.
Even with the latest version of IE9 I have this same issue. As MeProtozoan suggested, adding a transparent background image to the anchor(s) gets the behavior working as desired, but damn it's dirty.
I had similar problem with hover in div not working in IE8 and changing my doctype to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
fixed it.
More details here
![Prime Path[POJ3126] [SPFA/BFS]](https://oscimg.oschina.net/oscnet/e1200f32e838bf1d387d671dc8e6894c37d.jpg "Prime Path[POJ3126] [SPFA/BFS]")
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 神经病院院长 的文章《IE8: Div hover only works when background color is》','https://www.manongdao.com/article-168561.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}