maintain hover menu on mouseover in jquery

Question

I have a table with some customer data. I am using jquery hover to show the actions(Edit, Delete, View) for the customer.

Below is the 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>

And the script is here:

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

When i move the mouse on each row of the table, i can able to show the actions for the customer row. But when i move the mouse over the actions(Edit, Delete, View), it hides the hover menu.

Whats the way to fix it?

Answer 1

Add this to your javascript :

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

It should keep your menu displayed while hovering it.