Overlay Div: mouseouts firing on each letter underneath the overlay in IE
Wondering if anyone knows the way around this:
If I have a structure that has an image which when moused over, shows a description div, like this:
<div id="desc" style="opacity:0;filter:alpha(opacity=0);width:360px;position:absolute;bottom:0px;right:0px;z-index:0px;">
<div class="MainContentText">Materials: </div>
<div class="MainContentText">Products: </div>
<div id="overlay" onmouseover="opacity('desc', 0, 100, 500)" onmouseout="opacity('desc', 100, 0, 500)" style="position:absolute;top:0px;right:0px;width:500px;height:600px;z-index:500;"></div>
All workes fine on Firefox, however not in IE7 or 8 using doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The problem in IE is that whenever the mouse goes over a letter as in one of the letters in 'Materials:' or 'Products:', the mouseover event fires on the overlay and causes it to flicker.
Im not sure why the overlay doesnt block these events since it is definitely the foremost element.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread