View Full Version : Div overylay not "blocking" mouseover event in covered div (IE only)

Aug 12th, 2010, 03:47 PM
Hello. I have an image on my site with a mouseOver event that causes a previously hidden <div> to become visible.

The <div> in question shows up in front of the image, but does not completely cover it. A little bit of the image below sticks out to the right of the div overlay. The <div> has a mouseOut even that hides itself again. However, because the image below peeks out to the right, if the user runs their mouse out of the <div> to the right, it opens the div back up again. This was no surprise.

So... i added a second <div> that completely covers the image below, then nested the fore-mentioned div inside it. When the mouseOut even occurs it hides the functional <div>, then triggers a .5 second timer that closes this "blocking" div container.

This solution works great in Firefox, Google Chrome, & Safari. However, IE once again needs special catering. In IE the new "blocking" div does not prevent the mouseOver event for the image it is blocking from being triggered. In testing i made the background of the blocking <div> an obnoxious color so that i could be sure it was completely covering the image below. Even though i can't see the image, putting my mouse over that area still triggers its mouseOver event.

I hope i explained that in a way that makes sense. The site is http://jugtones.com, and the image is the animated jug on the right side below the menu.

Thanks in advance for any advice you can offer. -Scott

position: absolute;
top: 290px;
right: 0px;
visibility: hidden;
width: 165px;
height: 166px;
position: relative;
right: 15px;
visibility: hidden;
width: 150px;
height: 160px;
box-shadow: 3px 3px 5px #818181;
-webkit-box-shadow: 3px 3px 5px #818181;
-moz-box-shadow: 3px 3px 5px #818181;
border:1px solid black;
color: black;
padding: 2px;