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

我试图名单上添加Facebook的 “喜欢按钮” 和Twitter “的鸣叫按钮”，我的表结构是：IE7/8：div丢失：如果鼠标移动到div内的iframe上，则悬停！

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

CSS是：

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

IE7/8：问题是当鼠标移动到iframelistItem失去了它的焦点。

我试图通过csshover.htc修复它，但它不能解决它。

它在其他浏览器中正常工作。

你可以检查出来这里住：
http://bit.ly/hsFtq6
你需要在网站上注册，很容易和快速:)

感谢

来源

2010-12-22 Behzad

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

来源

2010-12-23 16:58:14 Behzad

由于jQuery 1.7，live（）已被弃用。用（）代替。 – 2015-04-30 14:08:06

这是由设计。一旦你进入iframe，你就会“离开”父页面。 CSS属性/操作将被此应用程序级别隔离分隔开。解决这个问题的唯一方法是通过使用某种后端（也许是AJAX）来获取子页面的呈现内容并将它们加载到div的InnerHTML中，以消除iframe限制。

来源

2010-12-22 11:48:30

谢谢乔尔，当然取代iframe的div将修复它。但它已在所有其他浏览器上正常工作。有没有其他简单的CSS或JS破解它？ – Behzad 2010-12-22 14:26:14

我相信这是预期的行为，认为这将违反XSS政策，如果它是JS和这类事件冒泡的正在发生。

来源

2010-12-23 17:01:32

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

回答

相关问题