IE8: Div hover only works when background color is set, very strange, why?

问题

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?

回答1:

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.

回答2:

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

回答3:

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.

回答4:

This is due to has layout. Using position:relative will give the same result without use of a unwanted background image.

回答5:

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.

回答6:

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.

回答7:

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.

回答8:

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

来源：https://stackoverflow.com/questions/3998917/ie8-div-hover-only-works-when-background-color-is-set-very-strange-why

标签

jquery

css

html

hover

transparent