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";
}

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";
}

• javascript
• mouseout

• Why was this post made munity wiki? – rahul Commented Jul 20, 2009 at 4:20
• You won't get answers because people don't get points on a cWiki... – James Commented Jul 20, 2009 at 6:35

2 Answers 2

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>

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