У меня есть простое раскрывающееся меню 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. Выпадающее меню остается опустившимся, когда моя мышь накладывает наложение # комментария-обертки.
У меня возникли аналогичные проблемы при работе с классом: hover psuedo. Он начал нормально работать, когда я изменил режим документа браузера на IE 9, а режим браузера также установлен на IE9. IE 9 имеет режим документа, установленный в IE8 по умолчанию.
Кроме того, вы можете добавить следующую метаинформацию в тег заголовка:
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
Надеюсь, что это поможет.
У меня была такая же проблема, и я знаю, что это уже старая должность, но я чувствовал, что должен опубликовать мое решение. В основном IE не принимает событие :hover для любых тэгов, отличных от <a> с указанным href (не работает в ранних версиях), если вы не добавите <!DOCTYPE HTML> вверху. И это все! Проблема решена:).
К сожалению, это, похоже, ошибка браузера, возвращая многие версии IE. Вы можете использовать JS-решение в качестве резервной копии для IE. Я создал пример jsFiddle, адаптировав код из другое решение решение этой проблемы.
Надеюсь, что это поможет!
Изменить: дальнейшее тестирование в IE9 показывает, что хотя отображение iframe отображается, зависание над полосами прокрутки скрывает его немедленно. Вероятно, для этого требуется более активное JS-решение, но оно зависит от вас, если вы хотите его реализовать.
Недавно у меня была проблема с hover в IE10 (не уверен в более низких версиях), которая сводила меня с ума. Я правильно установил свой css hover, и это было для div, содержащего iframe. Проблема заключалась в том, что когда вы наводили div, он показывал iframe, но как только вы попытались переместить мышь в iframe, она снова исчезнет. Я искал везде и ничего не нашел для приемлемого ответа, кроме как использовать javascript или jquery. После нескольких дней попыток разобраться, я нашел очень простое решение, которое сработало для меня. Я просто удалил iframe из div и использовал объект, например
<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>
Надеюсь, это поможет людям сэкономить много времени на исследования.