show and hide Panel on mouseleave event in JQuery

Today i got a task to display a panel for capturing user information, 

this panel only will be shown after user click on the specific button.

if the mouse move to the panel, then panel will be able to automatically

hide from the user, since i already allocate a mouseleave event for 

panel see 
 

 $(".slide").mouseleave(
                function (e) {
                    $(".slide").hide();
                }
              );

then i encounter an issue that the panel will stay at the page if user did not 

move the mouse into the panel, even i already force to set the cursor focus on 

the control inside the panel. but mouse still stay at the button after the

button click event is fired.

after i google the web, i could not be able to find any useful information.

here i configure out an around, i will implement the mouseleave event of

the button, since the mouse will stay on the button after the click on the button.

if the mouse is moved to top, left and right positions of the button, 

the panel will be invisible to user. 

html Code:

 <div> 

 <table>
        <tr>
         <td><a href="#" class="addIcon" id="btnAddTask">ADD TASK</a>  

<div ID="Panel3" class="slide" runat="server">Sliding Panel
   <asp:TextBox runat="server" ID="txtTest"></asp:TextBox>
  </div></td>
                           
      </tr>
    </table> 

 </div>
 

Javascript Code: the following code should be reside within the jquery ready 

function. 

  <script type="text/javascript">
         $(document).ready(function () {
             $("#btnAddTask").click(function (e) {
                 e.preventDefault();
                 if ($(".slide").is(":hidden")) {
                     $(".slide").show();
                     $("#txtTest").focus();
                    

          } else {
                     $(".slide").hide();
                 }
             });
 
 
             $(".slide").mouseleave(
                function (e) {
                    $(".slide").hide();
                }
              );
 
             $('#btnAdd').bind('mouseleave', function (e) {
                 var button = $('#btnAdd');
                 var position = $('#btnAdd).position();
                 if (e.pageY < position.top) {
                     $(".slide").hide();
                 }
                 else if (e.pageX >= ($('.addIcon').position().left + $('.addIcon').innerWidth())) {
                     $(".slide").hide();
                 }
                 else if (e.pageX < position.left) {
                     $(".slide").hide();
                 }
                 else if (e.pageY > position.top) {
                     if ($(".slide").is(":visible")) {
                         $(".slide").show();
                     }
                 }
             });

  });
        
        </script>