Child DIV на отведении указателя мыши на родительский DIV

Question

У меня есть некоторые HTML вещи, как этот

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

и в моем сценарии

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

} 

Мое требование, чтобы показать ссылку Изменить, когда пользователь место курсор над весь master div (divItemHolder) и скрыть его, когда он выйдет. Это работает fine.ITs, показывающий ссылку редактирования. Но когда я накладываю курсор на ссылку редактирования, ее исчезает. Даже моя функция щелчка не стреляет!

Может ли кто-нибудь из нас решить эту проблему?

Answer 1

Вам не удалось избежать вашего ", и вы забыли закончить другой. Попробуйте это:

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

Вот лучший подход:

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

с HTML, как:

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