Question

可能重复：
IE Problem : Transparent div above a picture doesn't trigger the CSS:hover

您好，对于与图片重叠的div，我面临鼠标悬停和mouseout事件的问题。我想在图像的某些部分显示热点（突出显示和可点击区域）。例如，有一张男孩的照片，他的脸上有可点击的方形区域，就像在facebook上一样。我使用以下代码来实现这个

<!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/about.jpg" />
        </div>

    </div>
</body>

highlightBox方法只是更改绘制边框的div的类，并更改div的bgcolor和不透明度。 mouseover事件在除IE9之外的所有浏览器中都能正常工作。在IE中，如果鼠标位于与图片重叠的div上，则不会触发mouseover事件。我正在使用HTML5 doctype作为页面。

更新：如果我在div中绘制一个表，鼠标事件就会起作用。但是，该事件只会在表格中有文本的地方触发。在我看来，鼠标事件在IE9中的空div中不起作用..任何评论？

Answer 1

将z-index：100添加到div样式

对于与图像重叠的div，mouseEvent不会触发

1 个答案: