Mouseenter only fired on border of transparent div in IE9

问题

In my code, I have a div with id 'SIAinfoBox' that is to be loaded with different details, depending on what div the mouse is currently over. I appended the following two listeners to every relevant div:

$(annoDiv).mouseover(function(event){
                event.stopPropagation;
                $('#SIAinfoBox').empty();
                $('#SIAinfoBox').append(details);
                $('#SIAinfoBox').css('visibility','visible');
            });
$(annoDiv).mouseleave(function(event){
                event.stopPropagation;
                $('#SIAinfoBox').empty();
                $('#SIAinfoBox').css('visibility','hidden');
            });

These divs have no background-color set, but have a 1px solid black border. In Firefox, all works well. But in Internet Explorer, the SIAinfoBox is filled only when the mouse is over the border of the div. Moving it inside the div seems to fire the mouseleave event, and the content is removed and div hidden. If I set a background-color, it works like it is expected to, but with no background-color (or transparent) it does not work. I have also tried using mouseenter instead of mouseover, but with the same results. Why does InternetExplorer behave like that or what can I do to achieve the results I am currently getting in FF for IE, too?

回答1:

I've had similar IE related issues such as this - you could make a transparent png and set the background to "url(images/transparent.png) repeat scroll 0 0 transparent" – SmokeyPHP

Didn't find his comment first so I moved it here as answer. A transparent image can be found with below link:

Answer: style="background:url(images/transparent.png) repeat scroll 0 0 transparent"

Transparent gif: http://www.golivetutor.com/download/spacer.gif

回答2:

It's ie bug, when background is transparent, element "transparent" for events too. Try to use "has layout" (zoom:1 for example), if it won't help, set transparent gif image in background to your element

回答3:

I have experienced that applying the css styling trick

{
  zoom: 1;
}

works in IE 9, but not IE 10. If you do not have a transparent GIF or PNG available to use as mentioned in some of the other solutions you can also use:

{
  background-color: rgba(0, 0, 0, 0.1);
}

Note that you will need to avoid applying this style in IE 8 as it seems to cause problems. "rgba" is available for IE9 and higher.

来源：https://stackoverflow.com/questions/7799459/mouseenter-only-fired-on-border-of-transparent-div-in-ie9

标签

jquery

internet-explorer

mouseover

mouseenter