: hover не работает должным образом в IE9 - PullRequest
Новая
       14

: hover не работает должным образом в IE9

12 голосов
/ 08 июля 2011

У меня есть простое выпадающее меню 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.

Ответы [ 4 ]

17 голосов
/ 19 ноября 2011

С аналогичными проблемами я столкнулся при работе с классом: hover psuedo. Он начал работать нормально, когда я изменил режим документа в браузере на IE 9, а режим браузера также установил IE9. В IE 9 по умолчанию установлен режим документа IE8.

Кроме того, вы можете добавить следующую мета-информацию в заголовок тега: 

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

Надеюсь, это поможет.

5 голосов
/ 22 ноября 2013

Я обнаружил, что у меня та же проблема, и я знаю, что это уже старый пост, но я чувствовал, что должен был опубликовать свое решение.В основном IE не принимает событие :hover для любых тегов, кроме <a> с указанным href (не будет работать в ранних версиях, т.е. версиях), если вы не добавите <!DOCTYPE HTML> вверху.И это было все!Проблема решена:).

1 голос
/ 08 июля 2011

К сожалению, это похоже на ошибку браузера, возвращающуюся ко многим версиям IE. Вы можете использовать решение JS в качестве резервной копии в IE. Я создал jsFiddle пример , адаптирующий код из другого решения для решения этой проблемы.

Надеюсь, это поможет!

Редактировать: дальнейшее тестирование в IE9 показывает, что, хотя отображается iframe, при наведении курсора на полосы прокрутки он сразу скрывается. Вероятно, для этого существует более сложное исправление JS, но вам решать, хотите ли вы его реализовать.

0 голосов
/ 13 августа 2013

У меня недавно была проблема с зависанием в IE10 (не уверенная в более низких версиях), которая сводила меня с ума. Я правильно настроил наведение CSS, и это было для 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>

Надеюсь, это поможет людям сэкономить много времени на исследования.

...