mouseoverとmouseout events jQuery

Question

私は、ユーザーがマウスオーバーするとDIVメニューを作成しています。 divメニューには、onclickイベントを持つ2つの子divもあります。アイコン上にマウスを置くと、メニューdivが表示されますが、子divを選択しようとしているときにメインメニューdivが非表示になります。

 <div id="actionMenu" style="display:none;width:40px;height:30px;background-color:white;z-index:9"> 
      <div id="addRowDiv">Add</div   > 
      <div id="deleteRowDiv">Delete</div> 
     </div> 

$(actionImage).mouseover(function(e) { 

     // get the coordinates 
     var x = e.pageX - 40; 
     var y = e.pageY - 10; 

     $("#actionMenu").css({ 

      position:"absolute", 
      top: y + "px", 
      left: x + "px" 
     }); 


     $("#actionMenu").attr("rowId", $(td).parent().attr("id")); 

     $("#actionMenu").show(); 
    }); 

$("#actionMenu").mouseout(function() { 

     $(this).hide(); 

    }); 


    $("#actionMenu").find("#addRowDiv").click(function() { 

     alert('add row clicked'); 

    });  

UPDATE 1：

Iは、データが取り込まれているテーブルを有しています。列の1つがアイコン（actionImage）です。アイコンの上にマウスを置くと、divメニュー（完了）が表示されます。 divメニューには2つの子div（追加と削除）があります。さて、私が子divの上にマウスを置くと、メインdiv（actionMenu）が消えます。子divがアクションメニューdiv内にあるので、なぜ消えますか？

Answer 1

マウスアウト時に#actionMenuを非表示にしています。

だから、あなたがアイコンの中にいるとき、divが表示され、また隠れる（私はアイコンが#actionMenuの外にあると仮定します）。最後に#actionMenu divはdivに入る前に外にいるので非表示になります。

を編集します。以下は問題を解決するようです。 DEMOここをクリック

$("#actionMenu").mouseenter(function() { 
    $(this).show(); 
}).mouseleave(function() { 
    $(this).hide(); 
}); 

Answer 2

clickにメニュー項目をマウスオーバーすると、メニュー項目のmouseoverイベントと共にメニュー項目divでイベントが発生し、メニュー項目が非表示になるために発生します。 mouseenterとmouseleaveイベントの組み合わせを使用すると、この問題が解決されます。

$(actionImage).mouseenter(function(e) { 

     // get the coordinates 
     var x = e.pageX - 40; 
     var y = e.pageY - 10; 

     $("#actionMenu").css({ 

      position:"absolute", 
      top: y + "px", 
      left: x + "px" 
     }); 


     $("#actionMenu").attr("rowId", $(td).parent().attr("id")); 

     $("#actionMenu").show(); 
    }); 

$("#actionMenu").mouseleave(function() { 

     $(this).hide(); 

    }); 


    $("#actionMenu").find("#addRowDiv").click(function() { 

     alert('add row clicked'); 

    });