悬停不能在IE9中使用iFrame [英] Hover not working with iFrame in IE9

问题描述

我使用CSS3 MegaMenu，它使用jQuery。我的一个下拉菜单项目使用iFrame显示其他地方托管的联系表单。

您可以在这里看到： http://www.deepdata.biz （这是右侧主导航栏上的最后一项：'电子邮件'）

它工作正常，除了在IE9中，悬停可以将其放下，但一旦鼠标进入iFrame区域，它就会消失，使用户无法填写表单。

我读过这是出于安全原因的目的 - 但必须有解决方法。

我最初有这个问题，当我自己的形式没有iFrame，并通过使用CSShover3.htc，它在IE中工作正常，所以我相当肯定这是一个iFrame问题。

已阅读使用Javascript的解决方案： http://jsfiddle.net/ENXpW/3/ - 但我在编写Java方面的经验不足阻碍了我理解它足以适应我的需求。

我搜索的另一个解决方案是将电子邮件链接的悬停样式更改为onClick命令，但同样缺乏使用Javascript的经验阻碍了我抓住我将如何做到这一点。

任何帮助将不胜感激。
CArRiE

解决方案

您可以使用这个小的jQuery片段和一些CSS修改：

  if（$。browser.msie）{
 $（li.right iframe）。hover（function（）{
 $（this）.parents（li.right）。trigger（hover）; 
}）; 
} 
  

在元素加载后，将它放在JS文件或页面的任何位置。然后，您需要为每个 .menu li：hover 创建一个副本，以便它也可以被触发。 a .hover类，即

.menu li：hover .align_right {

需要成为：

.menu li：hover .align_right，.menu li.hover .align_right {

I'm using CSS3 MegaMenu, that uses jQuery. One of my dropdown menu items uses an iFrame to display a contact form hosted elsewhere.

You can see here: http://www.deepdata.biz (it's the last item on the main nav bar to the right: 'Email')

It works fine, except in IE9, the hover works to drop it down, but once the mouse enters the iFrame area, it disappears, making it impossible for the user to fill out the form.

I've read that this is on purpose for security reasons- but there must be a way around it.

I initially had this problem when my own form without an iFrame and by using CSShover3.htc, it worked fine in IE, so I'm fairly certain it's an iFrame issue.

While searching I have read of a solution using Javascript: http://jsfiddle.net/ENXpW/3/ - but my inexperience with writing Java has hindered me from understanding it enough to adapt it to my needs.

Another solution I searched for was to change the hover styling for the 'Email' link to an onClick command, but again my lack of experience with Javascript is hindering me from grasping just how I would do this.

Any help would be greatly appreciated. CArRiE

解决方案

You can use this small jQuery snippet and a few CSS modifications:

if($.browser.msie){
    $("li.right iframe").hover(function(){ 
        $(this).parents("li.right").trigger("hover");
    });
}

Put it anywhere in your JS file or page, after the element has loaded.

Then, you need to create a duplicate of every .menu li:hover so that it also gets triggered by a .hover class, i.e.

.menu li:hover .align_right {

needs to become:

.menu li:hover .align_right, .menu li.hover .align_right {

这篇关于悬停不能在IE9中使用iFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！