DIV上悬停IE7当你触摸该分区的子元素丢失

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跨度然后下拉dissappears出于某种原因，如果我已经离开容器。

的其他每一个浏览器

<强>问题

我一直在抨击我的头靠在墙上了近3个小时试图找到所有IE7的错误我可以看到，如果任何人相关，但遗憾的是，没有运气。我原本以为这可能是“的z-index”的问题，而是因为它是实际显示低于此内容上面不能的情况下（和我已经尝试设置它的位置是：相对; z-index的：9999;“在p和跨距两者）。除此之外，我彻底难倒。然而，我知道该div下面的任何产品（例如，在上面的例子中的图像标签）做踢脚轮跨度在p的填充之后创建的问题。

进一步澄清： 我发现这是应该做的元素躺在跨度下方，但是由于它们没有显示过，我不知道如何解决它。此外，也无所谓什么元素下只是如果有，你可以“进入”下一个div（即你是不是已经在它），那么你就失去了悬停和下拉消失。

我知道我还没有挂上CSS，但任何人都可以想到的任何理由，为什么这可能是这样吗？另外，我已经停用所有的CSS直接在它的工作，它仍然会受到影响，但这个问题。

Answer 1

作为评价所述

把在跨度背景色会使悬停工作。用于将鼠标悬停在IE透明背景某些原因，它认为鼠标不会在DOM对象（或者在这种情况下，跨度）了，而是在它下面的元件，并调用鼠标移出事件。

微软认为这是一个错误，并链接到本博客条目有 MSDN 作品

Answer 2

发现是什么原因造成的元素在旧版本的IE中消失。 复制此添加到您的CSS

div { display: inline-block; }

div { display: block; }

这解释了错误很好。

Answer 3

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

这工作对我来说...哇什么是痛苦。