防止子节点的mouseout事件

Question

我有图像列表，在图像上我希望显示该图像的一些信息。而信息div的mouseout，同样应该消失。问题是当鼠标在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事件。