Ребенок 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');

 }

Мое требование - показать ссылку «Редактировать», когда пользователь поместит курсор на весь мастер div (divItemHolder), и скрыть его при выходе. Это работает нормально. Он показывает ссылку для редактирования. Но когда я наведу курсор на ссылку для редактирования, она исчезнет. Даже моя функция щелчка не стреляет!

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

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