4

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

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

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

提前致谢。

编辑：我也发现这几乎是相同的问题，但就像提问者一样，我没有使用 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;}
4

2 回答 2

1

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

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

.social-exp您可以做的是使用 jquery向 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;
}

在这里提琴

于 2014-03-20T12:41:46.517 回答
0

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

我只是把图片变成了一个可点击的链接，所以在 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>
于 2014-07-10T09:16:35.130 回答