IE7は、そのdivの子要素をタッチすると失われるdivにホバーします

StackOverflow https://stackoverflow.com/questions/1443850

質問

理論上

div（コンテナ）があり、その上にマウスを置くと、そのdivが表示されます（ドロップダウン）。ドロップダウンにはリンク画像などが含まれており、ドロップダウンからコンテナを離れるとドロップダウンが消えます。

<div id="container">
  <div>Hover over me to see extra stuff</div>
  <div id="drop-down">
     <div>
       <img />
     </div>
     <div>
       <a />
       <p><span>Info</span><span>More</span></p>
     </div>
     <img />
  </div>
</div>

Heres the jQuery 

$('#container').hover(
  function(){ $(this).find('#drop-down').addClass('hover'); },
  function(){ $(this).find('#drop-down').removeClass('hover'); }
);

ホバー用のCSSはこちら

#container #drop-down {left: -9999px;}
#container .hover {left: 0;}

実践

IE7以外のすべてのブラウザーで完全に機能しますが、ドロップダウンで最初のdivを含むスパンのスパンを強調表示すると、何らかの理由でコンテナーを離れたようにドロップダウンが消えます。

質問

私は3時間近くも頭を壁にぶつけて、関連性はあるが残念ながら運がなかったIE7バグをすべて見つけようとしていました。私はもともと「z-index」の問題だと思っていましたが、実際には下のコンテンツの上に表示されるため、そうではありません（「position：relative; z-index：9999;」を設定して試してみました） pとスパンの両方で）。それ以外は完全に困惑しています。ただし、そのdivの下のアイテム（たとえば、上記の例のイメージタグ）は、pのパディングのスパンをすり抜けた後に問題を引き起こすことを知っています。

さらなる説明： スパンの下にある要素を実行することであることがわかりましたが、それらが表示されていないため、それを修正する方法がわかりません。また、下に「入力」できるdivがある場合でも、その下にある要素は関係ありません。 （つまり、あなたはまだそこにいません）、ホバーを失い、ドロップダウンが消えます。

CSSを作成していないことは知っていますが、これが発生する可能性のある理由は誰でも考えられますか？また、CSSで直接動作するすべてのCSSを無効にしましたが、まだ影響を受けていますが、この問題があります。

役に立ちましたか？

解決

コメントで述べたように

スパンに背景色を設定すると、ホバーが機能します。 IEの透明な背景の上にマウスを移動すると、何らかの理由で、マウスがdomオブジェクト（この場合はspan）にもはや存在しないと見なされ、代わりにその下の要素にマウスアウトイベントが呼び出されます。

Microsoftはこれをバグと見なし、ブログエントリへのリンクを作成しましたそこに msdn エントリ

他のヒント

IEの古いバージョンで要素が消える原因を見つけました。 これをコピーしてcssに追加します

div { display: inline-block; }

div { display: block; }

これはバグをうまく説明しています。

div { display: inline-block; }  div { display: block; }

これは私のために働いた...すごい痛み。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top