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对象中（或者在这种情况下是跨度），而是在它下面的元素中调用鼠标输出事件。 / p>

Microsoft认为这是一个错误，并从blog entry条目

链接到此msdn

Answer 2

在旧版本的IE中找到导致元素消失的原因。复制将此添加到您的CSS

div { display: inline-block; }

div { display: block; }

This很好地解释了这个错误。

Answer 3

div { display: inline-block; }  div { display: block; }

这对我有用......哇痛苦。

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

3 个答案: