preventing mouseout event for child node

Question

I have list of images, on over on image i want to show some information on that image. And mouseout of the info div, same should disappear. Problem is when mouse moves on child tag of info div it fires mouseout even, which should not. And i am using normal 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 behavior of 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

That is the behavior of mouseover. If you were using jQuery however, you could use mouseenter/mouseleave events.