IE7 / 8: div теряет: hover, если мышь перемещается над iframe, который находится внутри div! - PullRequest
Новая
       5

IE7 / 8: div теряет: hover, если мышь перемещается над iframe, который находится внутри div!

5 голосов
/ 22 декабря 2010

Я пытаюсь добавить в список «кнопку« Мне нравится »в Facebook и« кнопку твита »в Твиттере, моя структура списка: 

<list>
    <listItem>
        <iframeContainer>
            <iframe/>
        </iframeContainer>
    </listitem>
</list>

CSS это: 

listItem iframeContainer {display:none;}
listItem:hover iframeContainer {display:block;}

IE7 / 8: проблема в том, что при наведении мыши на iframe listItem теряет фокус.

Я пытался исправить это с помощью csshover.htc, но это не помогло.

Отлично работает в других браузерах.

Вы можете проверить это в прямом эфире здесь:
http://bit.ly/hsFtq6
Вам нужно зарегистрироваться на сайте, это просто и быстро :)

Спасибо

Ответы [ 3 ]

9 голосов
/ 23 декабря 2010

Я исправил это так же, как csshover.htc, хотя добавление csshover.htc не исправило это! 

if($.browser.msie){
     $('.item').live('mouseenter',function() {
        $(this).addClass('hover');
     });
     $('.item iframe').live('hover',function() {
        $(this).parents(".item").addClass('hover');
     });
     $(".item").live('mouseleave',function() {
        $(this).removeClass('hover');
     });
}

css: 

.item:hover, .item.hover {background-color:#555;}
0 голосов
/ 23 декабря 2010

Я полагаю, что это предполагаемое поведение, учитывая, что это нарушило бы политики XSS, если бы это был JS, и происходил такой тип событий.

0 голосов
/ 22 декабря 2010

Это по замыслу.Как только вы вводите iframe, вы «покидаете» родительскую страницу.Свойства / действия CSS будут разделены этим барьером уровня приложения.Единственный способ преодолеть это - снять ограничение iframe, используя какой-то бэкэнд (возможно, AJAX), чтобы получить визуализированное содержимое дочерней страницы и загрузить его в InnerHTML вашего div.

...