javascript - 子ノードの mouseout イベントを防止する

Question

画像のリストがあります。画像の上に、その画像に関する情報を表示したいと思います。また、情報 div をマウスアウトすると、同じように消えます。問題は、マウスが info div の子タグに移動すると、mouseout が発生することです。そして、私は通常の JavaScript を使用しています。

<div id="pop_div" onmouseout="clearinfo()" >
   <img alt="" src="" />
   <p>lines of text</p>
</div>


function clearinfo()
{
  document.getElementById("pop_div").style.dispaly = "none";
}

Answer 1

mouseleave イベントの動作をエミュレートできます。

<div id="pop_div" onmouseout="if ((event.relatedTarget || event.toElement) == this.parentNode) clearinfo()" >
   <img alt="" src="" />
   <p>lines of text</p>
</div>

Answer 2

それがマウスオーバーの動作です。ただし、jQuery を使用している場合は、mouseenter/mouseleave イベントを使用できます。