：IE9でホバーが正しく動作していない

Question

私はその内部にiframeを持つシンプルなCSSドロップダウンメニューを持っています。ドロップダウンメニューの上にマウスを置くと、メニューがドロップダウンします。しかし、私のマウスがメニュー内でiframeを動かすと、メニューは元に戻ります。ここに私のコードの簡略版があります：

<div id="comments"> 
    <a href="#" class="btn">View comments</a> 
    <div id="comment-wrap"> 
    <iframe src="http://www.facebook.com/plugins/comments.php?..."></iframe> 
    </div> 
</div> 

<style type="text/css"> 
#comment-wrap{display:none;z-index:5;position:absolute;padding:10px;background-color:#fff;} 
#comments:hover #comment-wrap{display:block;} 
</style> 

これは、FF、クロム、およびオペラの最新バージョンで動作します。

P.S.私のマウスが＃comment-wrapのパディングをホバーすると、ドロップダウンメニューがドロップダウンしたままになります。

Answer 1

残念ながら、これはブラウザのバグであり、多くのIEバージョンを取り戻しているようです。 IEのバックアップとしてJSソリューションを使用できます。私はjsFiddle exampleを作成しました。この問題に対処するコードはanother solutionです。

希望に役立ちます！

編集：IE9でさらにテストすると、iframeが表示されますが、スクロールバーの上にカーソルを置くとすぐに非表示になります。これにはもっと複雑なJSの修正があるかもしれませんが、実装したいのはあなた次第です。

Answer 2

：hover psuedoクラスで作業しているときに、私は同様の問題に直面しました。私はブラウザのドキュメントモードをIE 9に変更し、ブラウザモードをIE 9に変更したときにうまく動作し始めました。 IE 9はデフォルトでドキュメントモードがIE8に設定されています。

また、あなたは頭タグに次のメタ情報を追加することができます

<meta http-equiv="X-UA-Compatible" content="IE=9"/> 

は、この情報がお役に立てば幸いです。

Answer 3

私は最近、私を夢中にしていたIE10（低バージョンについてはわかりません）にホバーの問題がありました。私は自分のCSSのホバーが正しく設定されていた、それはiframeを含むdivのためだった。問題は、iframeを表示すると、iframeにマウスを移動しようとするとすぐに再び消えてしまうようにdivを移動したときでした。私はどこでも検索し、javascriptまたはjqueryを使用する以外は、私には受け入れられる答えは何も見つかりませんでした。それを並べ替えることを試みた後、私のために働いた非常に単純な解決策を見つけました。 divからiframeを削除してオブジェクトを使用しました。

<div class='showme'>links<div style='float:left;' class='showme_1'> 
    <object type='text/html' data='http://www.google.com' style='width:100%; height:100%' border='0'> 
    </object> 
</div> 

私はこれが人々の研究時間を大幅に節約できると願っています。

Answer 4

私は同じ問題を抱えていることがわかりました。これはすでに古い投稿ですが、私は自分のソリューションを公開しなければならないと感じました。基本的にIEのを追加しない限り、と指定したhref（初期のバージョンでは動作しません）以外のタグについては、:hoverイベントを受け付けません。そしてそれはそれでした！問題が解決しました ：）。