Question

我有一张包含一些客户数据的表格。我正在使用jquery hover为客户显示actions(Edit, Delete, View)。

下面是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)上时，它会隐藏悬停菜单。

是什么方法来修复它？

Answer 1

将此添加到您的javascript：

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

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

在jquery中鼠标悬停时保持悬停菜单

1 个答案: