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