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-expjquery を使用して 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 ではホバー効果は機能しませんが、ユーザーはリンクをたどることができます。騙されたような気分ですが、それで十分です。他の解決策についてナタリーに感謝します。

 <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 に答える