PDA

Click to See Complete Forum and Search --> : Overlay Div: mouseouts firing on each letter underneath the overlay in IE

jrwarwick
04-15-2009, 03:15 AM
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 style="position:relative">
<div style="position:relative;background-image:url(...);width:500px;height:600px;overflow:hidden">
<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: &nbsp;</div>
<div class="MainContentText">Products: &nbsp;</div>
</div>
</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>
</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.

Any idea how to get around this with CSS? I dont want to have to use javascript much.

THanks.
lystar
04-15-2009, 11:54 AM
Try using "display: none;" on the description div's coupled with "position: absolute"

Nest each image & description div within a parent div then apply the :hover effect to the parent div rather than the image.

Give the parent div's "position: relative"

So your :hover event will look something like:

parentDiv :hover descriptionDiv {
display: block;
top: <INSERT y Co-Ord>;
left: <INSERT x Co-Ord>;
}

The x,y co-ords will be relative to the image (actually relative to the parent div, but without borders it will appear relative to the image)

Hope that helps.
jrwarwick
04-16-2009, 01:25 AM
Hey, thanks for your help.
I ended up changing the text containing elements to SPANs and then the overlay script as follows:

<div id="overlay" class="MainRightOverlay" onmouseover="if(event.fromElement&&event.fromElement.tagName!='SPAN')opacity('RightDescBoxLeft', 0, 100, 500)" onmouseout="if(event.toElement&&event.toElement.tagName!='SPAN')opacity('RightDescBoxLeft', 100, 0, 500)"></div>

Cheers.