維護鼠標懸停在jquery上的懸停菜單

我有一個客戶數據表。我正在使用jquery懸停來爲客戶顯示actions(Edit, Delete, View)。維護鼠標懸停在jquery上的懸停菜單

下面是HTML：

<table id="hovertable" width="100%" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td> 
      Row 1 Column 1 
     </td> 
     <td> 
      Row 1 Column 2 
     </td> 
     <td> 
      <input type="hidden" name="iVal" value="1" /> 
      Row 1 Column 3 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Row 2 Column 1 
     </td> 
     <td> 
      Row 2 Column 2 
     </td> 
     <td> 
      <input type="hidden" name="iVal" value="2" /> 
      Row 2 Column 3 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Row 3 Column 1 
     </td> 
     <td> 
      Row 3 Column 2 
     </td> 
     <td> 
      <input type="hidden" name="iVal" value="3" /> 
      Row 3 Column 3 
     </td> 
    </tr> 
</table> 
<div id="hovermenu" style="display: none; position: absolute;"> 
    <a href="Home/Edit/" id="hoverlink">Edit</a> 
</div>

和腳本是在這裏：

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() {    
     $("#hovertable tr").hover(
      function() { 
       var pTop = $(this).offset().top; 
       var pLeft = $(this).offset().left + $(this).width() - "10"; 
       $('#hoverlink').attr("href", "/Home/Edit/" + $(this).find('input[name=iVal]').val()); 
       $("#hovermenu").css({ 
        top: pTop, 
        left: pLeft 
       }).show(); 
      }, 
      function() { 
      $("#hovermenu").hide(); 
      }); 
    }); 
</script>

當我移動鼠標在桌子上的每一行，我可以能夠以示對行動顧客排。但是當我將鼠標移動到actions(Edit, Delete, View)上時，它隱藏了懸停菜單。

解決方法是什麼？

來源

2009-12-07 Prasad

添加到您的javascript：

$("#hovermenu").hover(
    function(){ 
    $(this).show(); 
    }, 
    function(){} 
);

應該保持展示你的菜單，而它徘徊。

來源

2009-12-07 13:54:33

你的例子演示了懸停（進出），所以菜單永遠不會被隱藏。 Out事件應該激發一個隱藏功能。。 $（「＃hovermenu」）懸停（函數（）{$ （本）.show（）;} ，函數（）{$ （本）.hide（）;} ）; – BenTheDesigner 2009-12-07 14:02:42

不是真的，它已經隱藏在行的懸停。只有當您將鼠標懸停在與其相關的行上時，您纔不想隱藏「編輯」菜單。我試過這個代碼，它的工作原理。 – 2009-12-07 14:05:55

工作完美。 – Prasad 2009-12-07 14:40:08

維護鼠標懸停在jquery上的懸停菜單

回答

相關問題