Internet Explorer and onMouseOver/onMouseOut

Question

Hi all,

I have tried looking a similar question on here but couldnt find one so here it comes:

I have this html (ignore the "+whatever+@", its in a codebehind file so im putting some variables that im getting from there):

<div id='ReferenceContainer"+UniqueID+@"' style='background-color:"+BackcolourOFF+@"; width:"+CompWidth+@"; height:"+CompHeight+@";'>
    <div id='Reference"+UniqueID+@"' style='width:"+CompWidth+@"; height:"+CompHeight+@"; '>
        <div id='RefTextContainer"+UniqueID+@"' style='float:left; width:"+CompWidth+@"; height:"+CompHeight+@"; ' >
            <div id='RefTitleCon' style='margin-top:"+RefTitleMargin+@"px; color:"+RefTitleColor+@"; z-index:-1;' ><p><b>"+RefTitle+@"</b></p>    </div>  
            <div id='RefTextCon'><p>"+RefText+@"</p></div>
        </div>
        <div id='RefPicContainer"+UniqueID+@"' style='float:right;'>
            <img id='RefImg"+UniqueID+@"first' class='first' name='RefImg"+UniqueID+@"' src=" + StartImg + @" style='position:absolute;' ></img>
            <img id='RefImg"+UniqueID+@"second' class='second' name='RefImg"+UniqueID+@"' src=" + AltImg + @" style='display:none;' ></img>
        </div>
        </div>
    <div id='ScriptContainer"+UniqueID+@"' style='width:"+CompWidth+@"; height:"+CompHeight+@";  position:relative; top:-"+CompHeight+@"px; left:0px;' onMouseOver='ChangeBackcolourON"+UniqueID+@"()' onMouseOut='ChangeBackcolourOFF"+UniqueID+@"()'></div>
</div>

Now in firefox, everything works just perfect. The div "ScriptContainer" sits in front of the whole thing and when the mouse enters or leaves the functions work exactly as they should. But IE8 places the text in front of everything and then the functions do not work as i would like them to. "ChangeBackcolourOFF" gets called every time the mouse enters the text, which sits in front of everything and "ChangeBackcolourON" gets called every time the mouse enters the "Scriptcontainer" from the text.

So i either need to figure out how to force the text to be placed behind the "Scriptcontainer" or some other solutions.

I appreciate you answers

Answer 1

Okay, i actually figure this out by trial and error. So i thought i would share.

Apparently, if the "Scriptcontainer" does not have a background colour then IE places the text in front, but if the "Scriptcontainer" has a background colour then the text is placed behind.

So i gave the "Scriptcontainer" a background colour and made it see through with filter:alpha(opacity = 0); opacity: 0; so like this:

<div id='ScriptContainer"+UniqueID+@"' style='width:"+CompWidth+@"; height:"+CompHeight+@"; position:relative; background-color:#ffffff; filter:alpha(opacity = 0); opacity: 0;' onMouseOver='ChangeBackcolourON"+UniqueID+@"()' onMouseOut='ChangeBackcolourOFF"+UniqueID+@"()'>

Im not sure if there are other, perhaps better solutions to this problem but it seems to work for me.

Answer 2

Hello,

Came across this and found it very helpful. I was creating a "hover zone" by which some other event would occur whilst someone hovered in said zone. The zone was essentially just a div with a height and width on it. In IE it wouldn't fire because apparently it needs a background color ... i used your solution. Thanks!