Mouseout event prevention for child node

Question

I have a list of images, on top of the image. I want to show some information about this image. And turning off the info div should also disappear. The problem is that the mouse moves along the child tag info div, which even launches the mouse, which should not. And I use plain 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

You can emulate the behavior of the mouseleave event:

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

Answer 2

This is mouse behavior. However, if you use jQuery, you can use mouseenter / mouseleave events.