IE7/8:如果鼠标移到 div 内的 iframe 上，则 div 会丢失 :hover！

IE7/8: div loses :hover if mouse moves over an iframe which is inside the div!(IE7/8:如果鼠标移到 div 内的 iframe 上，则 div 会丢失 :hover！)

问题描述

我正在尝试在列表中添加 facebooklike 按钮"和 twittertweet 按钮"，我的列表结构是:

I'm trying to add facebook "like button" and twitter "tweet button" on a list, my list structure is:

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

css 是:

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

IE7/8:问题是当鼠标移到 iframe 上时，listItem 失去焦点.

IE7/8: the problem is when mouse moves over the iframe the listItem loses its focus.

我尝试通过 csshover.htc 修复它，但它没有修复它.

I tried to fix it by csshover.htc but it doesn't fix it.

它在其他浏览器中运行良好.

It works fine in other browsers.

你可以在这里现场查看:
http://bit.ly/hsFtq6
您需要在网站上注册，它既简单又快捷:)

you can check it out live here:
http://bit.ly/hsFtq6
you need to signup at website, it's easy and fast :)

谢谢

推荐答案

我已经用和csshover.htc一样的方法修复了，虽然添加csshover.htc没有修复！

I've fixed it by the same way as csshover.htc though adding csshover.htc didn't fix it!

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;}

这篇关于IE7/8:如果鼠标移到 div 内的 iframe 上，则 div 会丢失 :hover！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！