当你触摸那个div的子元素时,IE7将鼠标悬停在div上

Question

理论上

我有一个div(容器),当它悬停在其中一个子div上时(下拉).下拉包含链接图像等,当我离开它和容器然后下拉消失.

<div id="container">
  <div>Hover over me to see extra stuff</div>
  <div id="drop-down">
     <div>
       <img />
     </div>
     <div>
       <a />
       <p><span>Info</span><span>More</span></p>
     </div>
     <img />
  </div>
</div> 

继承人jQuery

$('#container').hover(
  function(){ $(this).find('#drop-down').addClass('hover'); },
  function(){ $(this).find('#drop-down').removeClass('hover'); }
);

继承了CSS的悬停

#container #drop-down {left: -9999px;}
#container .hover {left: 0;}

在实践中

在IE7以外的每个浏览器中,它都可以正常工作,但是当我在下拉列表中突出显示第一个包含div的跨度时,由于某种原因,下拉消失,就好像我已经离开了容器一样.

问题

我一直把我的头撞在墙上近3个小时试图找到所有ie7的错误,我可以看看是否有任何相关但遗憾的是没有运气.我原本以为它可能是'z-index'问题,但因为它实际上显示在下面的内容上面不是这种情况(我已经通过设置'position:relative; z-index:9999;'来尝试它)在p和跨度上).除此之外,我完全被难倒了.但我确实知道div下面的任何项目(例如上面示例中的图像标记)确实在绕过p的填充边缘后产生问题.

进一步澄清:我发现它是做位于跨度下方的元素,但由于它们没有显示,我不知道如何修复它.此外,如果底部有一个div可以"进入"(即你还没有进入),那么下面的元素是什么并不重要,那么你就会失去悬停并且下拉消失.

我知道我没有提出CSS,但任何人都可以想到为什么会发生这种情况的原因？此外,我已禁用所有直接在其上工作的CSS,但它仍然受到影响,但是这个问题.

Answer 1

正如评论中所说

在跨度上添加背景颜色将使悬停工作.出于某种原因,当您将鼠标悬停在IE中的透明背景上时,它会认为鼠标不再位于dom对象中(或者在这种情况下是跨度),而是在其下方的元素中调用鼠标输出事件.

Microsoft认为这是一个错误,并从msdn条目链接到此博客条目