Child div's disappearing on mouseout of Parent div

Question

I have some HTML stuff like this

<div id='divItemHolder'onMouseout='HideEditDiv()'  onMouseover='ShowEditDiv()><div id='itemName'></div><div id='divEdit'></div></div>

and in my script

 function ShowEditDiv() {
  $("#itemName").removeClass().html("<a href=\"javascript:Edit()">Edit</a>").addClass("divEdit");
   }
function HideEditDiv() {
$("#itemName").html("&nbsp;").addClass('divEdit');

 }

My requirement is to show the Edit link when user place cursor over the entire master div (divItemHolder) and hide it when he moves out. This works fine.ITs showing the edit link.But When i place cursor over the edit link,its disappearing. Even my click function is not firing !

Can any one hlpe me to solve this ?

Answer 1

You didn't escape your ", and you forgot to end another. Try this:

function ShowEditDiv()
{
    $("#itemName").removeClass().html("<a href=\"javascript:Edit()\">Edit</a>").addClass("divEdit");
}
function HideEditDiv()
{
    $("#itemName").empty().addClass('divEdit');
}

Here's a better approach:

$(document).ready(function()
{
    $(".parent")
     .mouseenter(function()
     {
      $(this).children(".edit").show();
     })
     .mouseleave(function()
     {
      $(this).children(".edit").hide();
     })
     .children(".edit").hide();
}

With HTML like:

<div class="parent">
    ...
    <div class="edit">
     <a href="javascript:Edit()">Edit</a>
    </div>
</div>
<div class="parent">
    ...
    <div class="edit">
     <a href="javascript:Edit()">Edit</a>
    </div>
</div>
...