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 事件。