当您触摸该 div 的子元素时，IE7 将鼠标悬停在 div 上答案

【问题标题】：IE7 hover on div being lost when you touch a child element of that div当您触摸该 div 的子元素时，IE7 将鼠标悬停在 div 上
【发布时间】：2012-11-30 10:37:28
【问题描述】：

理论上

我有一个 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，它仍然受到影响，但是这个问题。

【问题讨论】：

不要使用javascript，试试这个，看看它是否有效 .container .drop-down {display:none;} .container:hover .drop-down {display:block;}
你能发布你的悬停类吗？
@Zoidberg +1 解决方案，在大多数这些 javscript 中对于简单的悬停效果案例都是正确的
@Jonathan 谢谢，我没有将其作为答案发布，因为我不确定他想要什么，因为该答案在 IE 6 中不起作用。
嗯，我认为 op 正在使用 id，所以应该是，#container #drop-down {display:none;} #container:hover #drop-down {display:block;}，但是效果很好。

标签： css internet-explorer internet-explorer-7

【解决方案1】：

如cmets中所说

在跨度上添加背景颜色将使悬停工作。出于某种原因，当您将鼠标悬停在 IE 中的透明背景上时，它认为鼠标不再位于 dom 对象（或在本例中为 span）中，而是位于其下方的元素中并调用 mouse out 事件。

Microsoft 认为这是一个错误并从那里链接到此 blog entry msdn 条目

【讨论】：

天啊。我不敢相信 IE 中还有我不知道的错误。谢谢。
宇宙中只有两种无限的东西，一种是IE的bug数量。

【解决方案2】：

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

div { display: inline-block; }

div { display: block; }

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

【讨论】：

【解决方案3】：

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

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

【讨论】：