mouseEvent not firing for a div overlapping with an image [duplicate]_问答_开发者

mouseEvent not firing for a div overlapping with an image [duplicate]

开发者 https://www.devze.com 2023-03-04 15:56 出处：网络

This question already has answers here: Closed 11 years ago. Possible Duplicate: IE Problem : Transparent div above a picture doesn't trigger the CSS:hover

This question already has answers here: Closed 11 years ago.

Possible Duplicate:
IE Problem : Transparent div above a picture doesn't trigger the CSS:hover

Hi, Am facing issue with mouseover and mouseout event for a div which is overlapping with a picture. I want to show hotspots(highlighted and clickable area) over some parts of an image. For example, there is a picture of boy and his face has clickable square area over it like in facebook. Am using following code to achieve this

<!DOCTYPE HTML>
      <html>
     <head>
       <title>test.html</title>
       <link rel="stylesheet" type="text/css" href="css/styles.css">
       <style type="text/css">
         .mouseOutClass {
            border:  1px dotted #74CFFA;
          }
         .mouseOverTextClass {  
           cursor: pointer;
           border:  1px solid #74CFFA;
           background-color: #ffeaab; 
           filter:alpha(opacity=60);
           -moz-opacity:0.6;
           -khtml-opacity: 0.6;
           opacity: 0.6;
          }
      </style>

     <script type="text/javascript">

    function highlightBox(obj, show) {
      if (show) {
            obj.className = "mouseOverTextClass";
      } else {
        obj.className = "mouseOutClass";
      }
}
</script>
    </head>
     <body>
    <div  style="height: 100%;width: 100%;">    
        <div >
            <div style="position:absolute; left:0px; top:0px; height:150px; width:150px;"
                class="mouseOutClass" onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);" >
            </div> 
            <div style="position:absolute; left:200px; top:100px; height:200px; width:200px;"
                 class="mouseOutClass"  onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);"   >                       
            </div>
            <img src="images/abo开发者_JAVA百科ut.jpg" />
        </div>

    </div>
</body>

The highlightBox method just changes the class of the div which draws a border and changes bgcolor and opacity of the div. The mouseover event is working fine in all browsers other than IE9. In IE the mouseover event is not fired if the mouse is over div where it is overlapping with picture. Am using HTML5 doctype for the page.

Update: the mouse events works if I draw a table in the div. however, the event will fire only on those places where there is a text in the table. Seems to me that mouse event does not work in empty div in IE9.. Any comments?

add a z-index:100 to the div style