:hover is not working properly in IE9
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:
<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 Oper开发者_如何学编程a.
P.S. The dropdown menu remain dropped down when my mouse is hovering the padding of #comment-wrap.
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.
Additionally, you can add the following meta info in the head tag:
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
Hope this helps.
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 :hover event 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 :).
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 solution addressing this issue.
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.
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
<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.
加载中,请稍侯......
精彩评论