enfant div de la disparition sur mouseout du parent div

Question

J'ai des trucs HTML comme ça

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

et dans mon script

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

} 

Mon exigence est de montrer le lien Modifier lorsque le curseur de l'utilisateur place sur la master div entier (divItemHolder) et le cacher quand il déménage. Cela fonctionne bien.ITs montrant le lien d'édition.Mais lorsque je place le curseur sur le lien d'édition, il disparaît. Même ma fonction de clic ne se déclenche pas!

Quelqu'un peut-il m'aider à résoudre ce problème?

Answer 1

Vous n'avez pas échappé à votre ", et vous avez oublié d'en terminer une autre. Essayez ceci:

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

est ici une meilleure approche:

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

Avec HTML comme:

<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> 
...