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

【问题标题】：using hover to display a hidden iframe which then loses focus in Internet Explorer使用悬停显示隐藏的 iframe，然后在 Internet Explorer 中失去焦点
【发布时间】：2013-10-10 19:24:46
【问题描述】：

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

所以，我希望 iframe 在鼠标移到它上面时保持焦点，以便可以点击里面的链接，代码目前在 FF、Chrome、Safari 但不适用于 IE。

我已经玩过其他帖子中的 java 脚本，但我无法让它工作。如果有人能看一看并帮助我，我将不胜感激。

提前致谢。

编辑：我还发现 this 几乎是相同的问题，但就像提问者一样，我没有使用 javascript 的技能来适应我的需求。

这是我的小提琴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;}

【问题讨论】：

标签： jquery html css iframe hover

【解决方案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

【讨论】：

谢谢娜塔莉，这看起来是解决问题的好方法。感谢您抽出宝贵时间阅读我的帖子和回答。

【解决方案2】：

我决定以最简单的方式解决这个问题。

我只是把图片变成了一个可点击的链接，所以在 IE 中悬停效果不起作用，但用户仍然可以点击链接。有点作弊的感觉，但已经足够了。感谢 Natalie 提供的其他解决方案。

 <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>

【讨论】：