CSS :hover 在 IE9 中无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6619156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
:hover is not working properly in IE9
提问by Linksku
I have a simple CSS dropdown menu with an iframe inside it. When I hover my mouse over the dropdown menu, the menu drops down. But when my mouse hovers the iframe inside the menu, the menu goes back. Here's a simplified version of my code:
我有一个简单的 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>
This works in the latest versions of FF, Chrome, and Opera.
这适用于最新版本的 FF、Chrome 和 Opera。
P.S. The dropdown menu remain dropped down when my mouse is hovering the padding of #comment-wrap.
PS 当我的鼠标悬停在#comment-wrap 的填充上时，下拉菜单保持下拉。
回答by Vilas Paskanti
I have faced similar problems while working with the :hover psuedo class. It started working fine when I changed the Document mode of the browser to IE 9 and the Browser mode also set to IE9. IE 9 has the document mode set to IE8 by default.
我在使用 :hover psuedo 类时遇到了类似的问题。当我将浏览器的文档模式更改为 IE 9 并且浏览器模式也设置为 IE9 时，它开始正常工作。默认情况下，IE 9 的文档模式设置为 IE8。
Additionally, you can add the following meta info in the head tag:
此外，您可以在 head 标签中添加以下元信息：
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
Hope this helps.
希望这可以帮助。
回答by CJ Mendes
I found to have the same problem and i know this is already an old post but i felt like i had to publish my solution. Basicly IE does not accept the :hoverevent for any tags other than <a>with specified href(wont work on early ie versions), unless you add <!DOCTYPE HTML>at the top. And that was it! Problem solved :).
我发现有同样的问题，我知道这已经是一个旧帖子，但我觉得我必须发布我的解决方案。基本上 IE 不接受:hover除<a>指定之外的任何标签的事件（不适用于href早期的 ie 版本），除非您<!DOCTYPE HTML>在顶部添加。就是这样！问题解决了 ：）。
回答by imsky
Unfortunately, this seems to be a browser bug, going back many IE versions. You can use a JS solution as a backup to IE. I've created a jsFiddle example, adapting code from another solutionaddressing this issue.
不幸的是，这似乎是一个浏览器错误，可以追溯到许多 IE 版本。您可以使用 JS 解决方案作为 IE 的备份。我创建了一个jsFiddle 示例，改编了另一个解决方案中的代码来解决这个问题。
Hope that helps!
希望有帮助！
Edit: further testing in IE9 shows that though the iframe is displayed, hovering over the scrollbars hides it immediately. There is likely a more involved JS fix for this, but it's up to you if you'd like to implement it.
编辑：在 IE9 中的进一步测试表明，虽然显示了 iframe，但将鼠标悬停在滚动条上会立即将其隐藏。可能有一个更复杂的 JS 修复，但如果你想实现它，这取决于你。
回答by Dodge
I recently had a hover issue in IE10 (not sure about lower versions) that was driving me crazy. I had my css hover set properly and it was for a div that contained an iframe. The issue was that when you hovered the div it would show the iframe but as soon as you tried to move the mouse into the iframe it would disappear again. I searched everywhere and found nothing for an acceptable answer for me except to use javascript or jquery. After days of trying to sort it out I found a very simple solution that worked for me. I simply removed the iframe from the div and used the object such as
我最近在 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>
I hope this helps folks save a lot of research time.
我希望这可以帮助人们节省大量的研究时间。
