html - IE7/8 : div loses :hover if mouse moves over an iframe which is inside the div!

Question

我正在尝试在列表中添加 facebook“like button”和 twitter“tweet button”，我的列表结构是:

<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
您需要在网站上注册，这既简单又快速:)

谢谢

Answer 1

我已经用与 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;}