鼠標懸停及移出事件的jQuery

我創建一個DIV菜單，當用戶將鼠標放置一個圖標。 div菜單還有兩個子div，它們有onclick事件。當我將鼠標懸停在圖標上時，菜單div會出現，但是當我要選擇子div的主菜單div隱藏時。鼠標懸停及移出事件的jQuery

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

我有填充了數據的表。其中一列是圖標（actionImage）。當我將鼠標懸停在圖標上時，我想顯示div菜單（完成）。 div菜單有兩個子div（添加和刪除）。現在，當我將鼠標懸停在子div上時，主div（actionMenu）消失。爲什麼它會消失，因爲子div在操作菜單div內？

來源

2012-01-20 azamsharp

可能要清理代碼。 $（actionImage）是指什麼？ – j08691

將鼠標懸停在圖標上時，您希望菜單顯示在哪裏？當您將鼠標移動到圖標上時，是否希望菜單沿着光標運行？ –

我剛更新了更多細節！ – azamsharp

您正在隱藏#actionMenu在鼠標上。

所以，這是怎麼回事，當你在裏面的圖標，在div顯示，並隱藏（我假定圖標位於#actionMenu外）。最後#actionMenu div是隱藏的，因爲您在進入div之前就已經在外面了。

編輯：下面似乎解決了問題。見DEMO這裏

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

來源

2012-01-20 21:40:49

我試圖用的mouseenter和鼠標離開，但他們不被認可的IE8。 – azamsharp

@azamsharp我的演示是否在IE8中工作？從jQuery 1.0開始，mouseenter和mouseleave就在那裏。必須有一些其他腳本錯誤。 –

請參閱@ShankarSangoli答案。這也會起作用，因爲你已經把div放在了圖標上。 –

它發生，因爲當你將鼠標懸停在菜單項click，mouseout事件也對菜單DIV與這樣的菜單DIV隱藏菜單項mouseover觸發的事件一起。使用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'); 

    });

來源

2012-01-20 21:37:03 ShankarSangoli

我試圖用的mouseenter但它說找不到對象。它不能識別mouseenter事件。我使用jQuery 1.7和IE 8. – azamsharp

鼠標懸停及移出事件的jQuery

回答

相關問題