Les événements jquery mouse masqués par img dans IE8 - toutes les autres plates-formes/navigateurs fonctionnent correctement

Question

Les événements de la souris jQuery pour mouseenter, mouseleave ou hover fonctionnent tous très bien sur tous les navigateurs Mac ou Windows à l'exception de IE8/Windows. J'utilise mouseenter et mouseleave pour tester des rectangles chauds (divs absolument positionnés et cotés sans contenu) sur une image utilisée comme hotspots pour rendre visibles les boutons de navigation lorsque différentes régions du rectangle principal (image) sont touché par le curseur. Windows/IE jQuery n'envoie jamais de notifications (mouseenter notre mouseleave) lorsque le curseur entre ou sort de l'une des cibles div s. Si je désactive la visibilité de l'image, tout fonctionne comme prévu (comme dans tous les autres navigateurs), donc l'image bloque tous les messages (l'intention était que l'image soit un fond et que tous les divs flottent dessus, où ils peuvent être cliqués sur). Je comprends qu'il y a un z-index gotcha (spécifiant explicitement l'index z pour chaque div positionné absolu), mais pas clair quant à la façon d'imbriquer ou de commander plusieurs divs pour permettre à un seul ensemble de règles jQuery soutenir tous les navigateurs. La balise d'image semble surpasser tous les autres divs et apparaît toujours devant eux ...

BTW: Je ne pouvais pas utiliser img comme balise dans ce texte, donc l'image est épelée dans ce qui suit, donc l'éditeur d'entrée fait ne pense pas que j'essaie de tirer un rapide sur stackoverflow ...

Comment utilisé? « MainView » est l'image d'arrière-plan, « zoneleft » et « zoneright » sont les zones actives où lorsque le curseur entre les boutons de nav « leftarrow » et Rightarrow « sont censés apparaître.

Javascript $ (» div # zoneleft "). bind (" mouseenter ", function() // entre la zone gauche voir la flèche gauche { arrowVisibility (" left "); document.getElementById (" leftarrow "). style.display =" block "; }). bind ("mouseleave", function() { document.getElementById ("leftarrow"). style.visibility = "caché"; document.getElementById ("rightarrow"). style.visibility = "hidden"; }); HTML

<div id="zoneleft" style="position:absolute; top:44px; left:0px; width:355px; height:372px; z-index:40;"> 
<div id="leftarrow"  style="position:absolute; top:158px; left:0px; z-index:50;"><img src="images/newleft.png" width="59" height="56"/></div></div> 

<div id="zoneright" style="position:absolute; top:44px; left:355px; width:355px; height:372px; z-index:40;"> 
<div id="rightarrow" style="position:absolute; top:158px; left:296px; z-index:50;"> 

(tag named changed so that I could include it here) 
<image src="images/newright.png" width="59" height="56" /></div></div> 
</div><!-- navbuttons --> 
<image id="mainview" style="z-index:-1;" src="images/projectPhotos/photo1.jpg" width:710px; height:372px; /> 
(tag named changed so that I could include it here) 

</div><!--photo--> 

Answer 1

Vous pourriez faire IE8 se comporter comme IE7 ajoutant ce-dessus de votre <tittle> tags:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 

et arrêter vos maux de tête avec IE8 pour toujours (seulement IE6 reste).

Answer 2

IE8 ne déclenchera pas de survol (ou d'événement de souris) sur des éléments ou des éléments complètement transparents sans contenu.

La seule solution de contournement que j'ai vue est de faire en sorte que le «point chaud» ou l'élément vide ait un arrière-plan, permettant ainsi à tous les événements de fonctionner. Ce que j'ai fait est de donner à l'élément une couleur d'arrière-plan dans IE8 et de mettre son opacité à 1 (le filtre d'IE a une opacité de 1-100 contrairement à d'autres, 0-1.0).

.ie8 div.hit-area { 

     background-color: #FFF; 
     filter: alpha(opacity=1); 

     } 

Coil Media - Workaround: Can Not Click or Hover Transparent Links/Elements in Internet Explorer IE6, IE7, IE8