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

Answer 2

这是设计的。输入iframe后，您将“离开”父页面。 CSS属性/操作将由此应用程序级别屏障分隔。解决这个问题的唯一方法是通过使用某种后端（可能是AJAX）来删除iframe限制，以获取子页面的呈现内容并将其加载到div的InnerHTML中。

Answer 3

我认为这是预期的行为，如果它是JS并且正在发生这种事件冒泡，则认为这会违反XSS策略。

IE7 / 8：div输了：如果鼠标移动到div内的iframe上，则悬停！

3 个答案: