IE下mouseout、mouseover问题总结

2015-4-24使用css的hover样式做鼠标移上显示层，离开隐藏层的效果时，在Firefox浏览器下正常，在IE下（使用ie7）发现，在显示层上移动鼠标，一旦鼠标经过层遮挡的其他元素时（非该层元素），则会触发mouseout事件，当前层就会隐藏。如下图

红色边框区域为“了解详情按钮”，鼠标移动到该区域则班型层就会隐藏。

正常情况下，鼠标经过显示层可以对内部元素进行选择，但是在ie（ie7）下，一旦鼠标经过遮挡层下的元素时，会导致显示层隐藏，效果就是触发了mouseout事件，导致显示层隐藏。

下面开始了漫长的找问题过程，在找问题的过程中，看到了很多别人关于ie浏览器mouseover和mouseout问题的整理，最后看到一篇文章“BT9029: 在 IE 中被透明元素遮挡的元素仍能响应鼠标事件”按照这篇文章的原因对自己的代码进行了修改，最终问题解决。问题的原因，可以参考http://www.w3help.org/zh-cn/causes/BT9029自己的问题在于显示层未设置background-color样式，而是在显示层内部元素设置了background-color，所以看起来是遮挡了下面的元素，但是整个显示层并未设置background-color，结果在 IE6 IE7 IE8 中被透明元素遮挡的元素仍能响应鼠标事件。下面是代码。

 <div class="i-d-item-classes"> 
   <div class="class-up">
    <i></i>
   </div> 
   <div class="class-c"> 
    <div class="i-d-item-class"> 
     <a href="http://peixun.dzwww.com/j_ a65/315f.html" target="_blank">企业团训</a> 
    </div> 
    <div class="i-d-item-class"> 
     <a href="http://peixun.dzwww.com/j_ a65/315e.html" target="_blank">新概念英语</a> 
    </div> 
    <div class="i-d-item-class"> 
     <a href="http://peixun.dzwww.com/j_ a65/315d.html" target="_blank">大声会口语</a> 
    </div> 
    <div class="i-d-item-class"> 
     <a href="http://peixun.dzwww.com/j_ a65/315c.html" target="_blank">GRE课程</a> 
    </div> 
    <div class="i-d-item-class"> 
     <a href="http://peixun.dzwww.com/j_ a65/315b.html" target="_blank">sat课程</a> 
    </div> 
    <div class="i-d-item-class"> 
     <a href="http://peixun.dzwww.com/j_ a65/315a.html" target="_blank">托福培训</a> 
    </div> 
    <div class="i-d-item-class"> 
     <a href="http://peixun.dzwww.com/j_ a65/3159.html" target="_blank">雅思培训</a> 
    </div> 
   </div> 
  </div>

问题的原因是样式i-d-item-classes并未设置背景色，而是对样式class-c设置了背景色，效果上是一样的，但是整个层还是默认颜色，导致能够触发该层下的元素。