Question

我有一个简单的CSS下拉菜单，里面有一个iframe。当我将鼠标悬停在下拉菜单上时，菜单会下降。但是当我的鼠标悬停在菜单中的iframe时，菜单会返回。这是我的代码的简化版本：

<div id="comments">
  <a href="#" class="btn">View comments</a>
  <div id="comment-wrap">
    <iframe src="http://www.facebook.com/plugins/comments.php?..."></iframe>
  </div>
</div>

<style type="text/css">
#comment-wrap{display:none;z-index:5;position:absolute;padding:10px;background-color:#fff;}
#comments:hover #comment-wrap{display:block;}
</style>

这适用于FF，Chrome和Opera的最新版本。

P.S。当我的鼠标悬停在＃comment-wrap。

的填充处时，下拉菜单仍会保持下拉状态

Answer 1

我在处理：hover psuedo类时遇到过类似的问题。当我将浏览器的文档模式更改为IE 9并且浏览器模式也设置为IE9时，它开始正常工作。 IE 9默认将文档模式设置为IE8。

此外，您可以在head标记中添加以下元信息：

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

希望这有帮助。

Answer 2

我发现有同样的问题，我知道这已经是一个老帖子，但我觉得我必须发布我的解决方案。除非您在顶部添加:hover，否则IE基本上不接受除<a>以外的任何标记href事件，而<!DOCTYPE HTML>除了{{1}}之外的版本（不会在早期版本上工作）。就是这样！问题解决了:)。

Answer 3

不幸的是，这似乎是一个浏览器错误，可以追溯到许多IE版本。您可以使用JS解决方案作为IE的备份。我创建了一个jsFiddle example，根据another solution调整代码来解决此问题。

希望有所帮助！

编辑：在IE9中进一步测试显示虽然显示了iframe，但将鼠标悬停在滚动条上会立即隐藏它。可能有一个更复杂的JS修复，但是如果你想实现它，这取决于你。

Answer 4

我最近在IE10中有一个悬停问题（不确定较低版本）让我发疯。我把我的css悬停设置正确，它是一个包含iframe的div。问题是，当你徘徊div时它会显示iframe但是当你试图将鼠标移动到iframe时它会再次消失。我到处搜索，除了使用javascript或jquery之外，没有找到任何可接受的答案。经过几天的努力解决后，我找到了一个非常简单的解决方案，对我有用。我只是从div中删除了iframe并使用了诸如

之类的对象

<div class='showme'>links<div style='float:left;' class='showme_1'>
    <object type='text/html' data='http://www.google.com' style='width:100%; height:100%' border='0'>
    </object>
</div>

我希望这可以帮助人们节省大量的研究时间。

：hover在IE9中无法正常工作

4 个答案: