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

这是一个类似的问题，但我用一个图像作为悬停点张贴

所以，我希望iframe在鼠标移动到它上面时保持焦点，这样里面的链接可以被点击，代码目前在FF、Chrome、Safari中工作，但在IE中不工作

我在另一篇文章中使用了java脚本，但我就是不能让它工作。如果有人能帮我看看，我会非常感激的

提前谢谢

编辑：我也发现了几乎相同的问题，但和提问者一样，我没有javascript技能来适应我的需要

这是我的小提琴

HTML

---

这对您不起作用的原因是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');
});

然后，您可以使用新的hover类简单地显示div，如下所示：

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

---

我决定用最简单的方法解决这个问题

我只是把图像变成了一个可点击的链接，所以在IE中悬停效果不起作用，但用户仍然可以跟随链接。有点像作弊，但这已经足够好了。感谢娜塔莉提供了另一个解决方案

 <div class="social-exp">
   <a href="http://www.twitter.com/emotivewd/" target="_blank"><img src="http://www.emotivewebdesign.com/wp-content/uploads/2013/06/twitter.png"></a>
      <div id="icon-exp">
      <iframe src="http://www.emotivewebdesign.com/wp-content/uploads/misc/twitter.html" width: 278px; height: 95px scrolling="no" frameborder="0" style="border:none; overflow:hidden"></iframe>
      </div>
 </div>

---

谢谢Natalie，这看起来是解决问题的好方法。我感谢你抽出时间阅读我的帖子并回答。

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

 <div class="social-exp">
   <a href="http://www.twitter.com/emotivewd/" target="_blank"><img src="http://www.emotivewebdesign.com/wp-content/uploads/2013/06/twitter.png"></a>
      <div id="icon-exp">
      <iframe src="http://www.emotivewebdesign.com/wp-content/uploads/misc/twitter.html" width: 278px; height: 95px scrolling="no" frameborder="0" style="border:none; overflow:hidden"></iframe>
      </div>
 </div>