ネストされたスパンマウスオーバー問題はIE

Question

に私はスパン要素を入れ子になったと私はparentスパンでmouseoverにchildスパンを示すとparentからmouseoutでそれを隠していた親スパン

<span id='parent' onmouseover='showChild()' onmouseout='hideChild()'> 
    <span id='child'></span> 
</span> 

ためmouseoverとmouseoutイベントを持っています。

これはすべてfirefoxとchromeでうまくいきますが、IEでマウスが子要素の上にくるとIEは親からマウスを出して子を隠すと考えています。

IEでこれを行う方法はありますか？

私は同じイベントを子スパンに入れてもIEでもうまくいくはずですが、これは正しい方法でしょうか？

Answer 1

回避方法が見つかりました。

divの親スパンをdisplay:inline-blockに変更しましたが、現在はどこでも動作しています。

ありがとうございます！

Answer 2

CSSを使用して、親のdivからポインタイベントを削除します。

#parent * { 
    pointer-events: none; 
} 

Answer 3

おそらくonmouseleave代わりのonmouseoutを使用してこの問題を解決することができます

<span id='parent' onmouseover='showChild()' onmouseleave='hideChild()'> 
    <span id='child'></span> 
</span> 

上記あなたが置くとhideChild()をトリガしません。親と子の間を移動するときにはshowChild()がトリガーされます。

これを防ぐために、あなたはonmouseenterでonmouseoverを置き換えることができます。

<span id='parent' onmouseenter='showChild()' onmouseleave='hideChild()'> 
    <span id='child'></span> 
</span> 

チェックこのfiddle。出力用のコンソールを開きます。

Answer 4

この場合、イベントターゲットが子でないかどうかを確認する必要があります。を使用してください。

これは作業抜粋です：

function showChild(e) { 
 
    e = e || window.event; 
 
    var child = document.getElementById("child"); 
 
    if (e.target !== child) { 
 
    child.style.display = "inline-block"; 
 
    } 
 
} 
 

 
function hideChild(e) { 
 
    e = e || window.event; 
 
    var child = document.getElementById("child"); 
 
    if (e.target !== child) { 
 
    child.style.display = "none"; 
 
    } 
 
}

#parent { 
 
    background-color: yellow; 
 
    width: 300px; 
 
    display: block; 
 
    height:100px; 
 
} 
 
#child { 
 
    background: blue; 
 
    color: white; 
 
    width:auto; 
 
    height:auto; 
 
}

<span id="parent" onmouseover="showChild(event)" onmouseout="hideChild(event)">Parent 
 
    <span id="child">Child</span> 
 
</span>

これはあなたが必要なものを提供します。

注：このshowChild(event)は、それ以外の場合は、イベントe is undefinedについて主張するよう

は、Firefoxでは、あなたが、あなたの関数にevent引数を渡す必要があります。