Internet Explorer et onMouseOver/onMouseOut

Question

J'ai essayé de chercher une question similaire sur ce site mais je n'ai pas réussi à en trouver une, alors la voici :

J'ai ce html (ignorez le "+quelque+@", c'est dans un fichier codebehind donc je mets des variables que j'obtiens de là) :

<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>

Maintenant, dans firefox, tout fonctionne parfaitement. La div "ScriptContainer" se trouve devant l'ensemble et lorsque la souris entre ou sort, les fonctions fonctionnent exactement comme elles le devraient. Mais IE8 place le texte devant tout et les fonctions ne fonctionnent pas comme je le souhaiterais. "ChangeBackcolourOFF" est appelé chaque fois que la souris entre dans le texte, qui se trouve devant tout, et "ChangeBackcolourON" est appelé chaque fois que la souris entre dans le "Scriptcontainer" à partir du texte.

Je dois donc trouver un moyen de forcer le texte à être placé derrière le "Scriptcontainer" ou d'autres solutions.

J'apprécie vos réponses

Answer 1

Ok, j'ai trouvé la solution par essai et erreur. J'ai donc décidé de partager mon expérience.

Apparemment, si le "Scriptcontainer" n'a pas de couleur d'arrière-plan, IE place le texte devant, mais si le "Scriptcontainer" a une couleur d'arrière-plan, le texte est placé derrière.

J'ai donc donné une couleur de fond au "Scriptcontainer" et je l'ai rendu transparent avec filter:alpha(opacity = 0) ; opacity : 0 ; comme ceci :

<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+@"()'>

Je ne sais pas s'il existe d'autres solutions, peut-être meilleures, à ce problème, mais cela semble fonctionner pour moi.