jquery - 使用悬停显示隐藏的 iframe，然后在 Internet Explorer 中失去焦点

Question

这是一个与发布的问题类似的问题 here但我使用图像作为悬停点。

因此，我希望 iframe 在鼠标移到它上面时保持焦点，以便可以单击其中的链接，该代码目前在 FF、Chrome、Safari 中有效，但在 IE 中无效。

我试过另一篇文章中的 java 脚本，但我就是无法让它工作。如果有人可以看一下并帮助我，我将不胜感激。

提前致谢。

编辑:我还找到了 this几乎相同的问题，但像提问者一样，我没有使用 javascript 的技能来适应我的需要。

这是我的 fiddle http://jsfiddle.net/GYNEW/

HTML

 <div class="social-exp">
    <img src="http://www.emotivewebdesign.com/wp-content/uploads/2013/06/twitter.png">
         <div id="icon-exp">
             <iframe src="http://www.emotivewebdesign.com/wp-content/uploads/misc/twitter.html"></iframe>
    </div>
 </div>

CSS

 .social-exp {width: auto; padding: 0 5px 10px; float: left}

 #icon-exp {display: none;}

 .social-exp:hover #icon-exp  {display: block !important; position: absolute; z-index:1;}

 iframe {width: 180px; background: #fff; border: 1px solid #000;}

Answer 1

这对您不起作用的原因是 iframe。 我的猜测是 IE 不会将 iframe 视为 html 结构的一部分，因为内容是从不同的位置加载的。

我能想到的解决这个问题的唯一解决方案是使用 javascript(如果我错了，请纠正我，这可以使用 css 来完成)

您可以使用 jquery 将悬停类添加到 .social-exp div。 这样，当鼠标悬停在 .social-exp 和 .social-exp 中的 iframe 上时，将添加该类。

$('.social-exp, .social-exp iframe').hover(function(){
  $(this).addClass('hover');
});

$('.social-exp, .social-exp iframe').mouseleave(function(){
  $(this).removeClass('hover');
});

然后您可以像这样使用新的悬停类简单地显示 div:

.social-exp.hover #icon-exp  {
   display: block !important;
   position: absolute;
   z-index:1;
}

Fiddle here