jquery mouse events masked by img in IE8 - all other platforms/browsers work fine
- by Bruce
Using the jQuery mouse events for mouseenter, mouseleave or hover all work swimmingly on all Mac or Windows browsers except for IE8/Windows.
I am using mouseenter and mouseleave to test for hot rectangles (absolutely positioned and dimensioned divs that have no content) over an image used as hotspots to make visible the navigation buttons when different regions of the main enclosing rectangle (image) are touched by the cursor. Windows/IE jQuery never sends notifications (mouseenter our mouseleave) as the cursor enters or exits one of the target divs. If I turn off the visibility of the image everything works as expected (like it does in every other browser), so the image is effectively blocking all messages (the intention was for the image to be a background and all the divs float above it, where they can be clicked on).
I understand that there's a z-index gotcha (so explicitly specifying z-index for each absolute positioned div does not work), but unclear as to how to nest or order multiple divs to allow a single set of jQuery rules to support all browsers. The image tag seems to trump all other divs and always appear in front of them...
BTW: I could not use i m g as a tag in this text so it is spelled image in the following, so the input editor does not think that I am trying to pull a fast one on stackoverflow...
How used?
"mainview" is the background image, "zoneleft" and "zoneright" are the active areas where when the cursor enters the nav buttons "leftarrow" and rightarrow" are supposed to appear.
Javascript
$("div#zoneleft").bind("mouseenter",function () // enters left zone see left arrow
{
arrowVisibility("left");
document.getElementById("leftarrow").style.display="block";
}).bind("mouseleave",function ()
{
document.getElementById("leftarrow").style.visibility="hidden";
document.getElementById("rightarrow").style.visibility="hidden";
});
HTML
<div id="zoneleft" style="position:absolute; top:44px; left:0px; width:355px; height:372px; z-index:40;">
<div id="leftarrow" style="position:absolute; top:158px; left:0px; z-index:50;"><img src="images/newleft.png" width="59" height="56"/></div></div>
<div id="zoneright" style="position:absolute; top:44px; left:355px; width:355px; height:372px; z-index:40;">
<div id="rightarrow" style="position:absolute; top:158px; left:296px; z-index:50;">
(tag named changed so that I could include it here)
<image src="images/newright.png" width="59" height="56" /></div></div>
</div><!-- navbuttons -->
<image id="mainview" style="z-index:-1;" src="images/projectPhotos/photo1.jpg" width:710px; height:372px; />
(tag named changed so that I could include it here)
</div><!--photo-->
