newbie help: stick bubble on rollout

newbie help: stick bubble on rollout

hi,

im new to jquery and javascript :/ and i dont speak english very well.

i build my first jquery script on this page:
http://lerntherapie.ausruf.ch/

as you can see, if the user hover over the linked image (icon), a bubble appears. this is working! however its needful, if the user switch the mouseposition over the bubble, the bubble should not disappear. the bubble should not disappear till then the mouse is not over the <a> or the <table>. i hope you know what i mean.

here is my "script" xD
  $("div.popup a").hover (function() {
    $height = $(this).next("table").height();
    $margin = $height - $height - $height;
    $start =  $margin - $height ;
    $(this).next("table").css({'top': $start});
    $(this).next("table").stop(true, true).animate({opacity: "show", top: $margin}, "slow");
  }, function() {
// here i need a check, something like (if $("table").hover) = break or return false, i dont know...
  $(this).next("table").animate({opacity: "hide", top: "-290"},"fast");
});


my html code (i know, it looks terrible]
<div class="bubble2">
         <div class="popup">
            <a href="#" id="2"><img src="_images/layout/trigger.gif" alt="*"></a>      
            <table>
               <tr>
                  <td class="top"></td>
               </tr>
               <tr>
                  <td class="content">
                     <img src="_images/kunz68.jpg" width="68" height="68" />
                      <p>Therese Kunz-L&ouml;ffel <br />
                        3032 Hinterkappelen<br />
                        031 901 14 62
                     </p>                  
                  </td>
               </tr>
               <tr>
                  <td class="bottom"></td>
               </tr>
            </table>
         </div>
      </div>


kind regards
martin [/code]