Parent Div's mouse out function is called on mouseover of child element

Question

I have the below HTML in my page

    <div id='divContainer1' onmouseover=ShowEditDiv(1) onmouseout=HideEditDiv(1)  class='divClcContainer'>
        <div id='divSlNo1'>1</div>
        <div id='divItem1'>This is content</div>
        <div id='divEditLink1'></div>
    </div>  
    <div id='divContainer2' onmouseover=ShowEditDiv(2) onmouseout=HideEditDiv(2)  class='divClcContainer'>
        <div id='divSlNo2'>2</div>
        <div id='divItem2'>This is content2</div>
        <div id='divEditLink2'></div>
    </div>

and in my javascript

function ShowEditDiv(divId)
{
  $("#divEditLink" + divId).html("<a href=\"javascript:Edit(divId)\"><img  src='edit_icon.gif' alt='Edit' title='Edit' /></a>").addClass("divEdit");
}
function HideEditDiv(divId) 
{  
  $("#divEdit" + divId).empty().addClass('divEdit');
}

My requirement is to show an edit link when user place his mouse over the master div. Now its working fine.But when i place mouse over the div which holds the edit image/link, it is disappearing. I found that when i place mouse over the edit div, the mouseout function of parent div is getting called. Can any one help me to solve this ?

Answer 1

Use

stopPropagation in child elements function.

Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.

Answer 2

Guys , I got the solution

The solution to this error is to use mouseenter and mouseleave events instead of mouseover and mouseout.

More information on this present in this link

http://jquery-howto.blogspot.com/2009/04/problems-with-jquery-mouseover-mouseout.html