在 jquery 中保持鼠标悬停菜单

Question

我有一个包含一些客户数据的表。我使用 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>

当我将鼠标移动到表格的每一行时，我可以显示客户行的操作。但是当我将鼠标移到操作（编辑、删除、查看）上时，它会隐藏悬停菜单。

有什么方法可以修复呢？

Answer 1

将其添加到您的 javascript 中：

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

它应该在悬停时保持您的菜单显示。