jquery - 悬停在 IE9 中无法与 iFrame 配合使用

Question

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

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

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

我了解到这是出于安全原因而故意这样做的 - 但必须有一种解决方法。

我最初遇到这个问题时，我自己的表单没有 iFrame，通过使用 CSShover3.htc，它在 IE 中运行良好，所以我相当确定这是一个 iFrame 问题。

在搜索时，我读到了一个使用 Javascript 的解决方案:http://jsfiddle.net/ENXpW/3/ - 但我在编写 Java 方面缺乏经验，这阻碍了我对它的充分理解，无法使其适应我的需求。

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

任何帮助将不胜感激。 卡里埃

Answer 1

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

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

在元素加载后将其放在 JS 文件或页面中的任意位置。

然后，您需要为每个 .menu li:hover 创建一个副本，以便它也可以由 .hover 类触发，即

.menu li:hover .align_right {

需要成为:

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