jQuery: user 'hovercard' on link mouseover
<p>Currently, when you mouseover specific anchor tags, a 'hovercard' element is faded in containing information about that user along with some links.  The hovercard is prepended to the body, and positioned absolute after calculating the offset of the hovered link.  This gives it the appearance of "pointing" to the hovered link.</p>

<p>Anyway, I want the hovercard to fade out when the hovered anchor tag OR the hovercard itself is "moused out."  So the question is how to allow one's cursor to move from the original hovered anchor TO the hovercard, and only fading it out if the cursor steps outside those two elements?</p>

<p>Here's my current JS, which removes the hovercard when you hover off of the original anchor tag.</p>

<pre><code>$('a.show_card').hoverIntent({
    over: function() {
      var link_offset = $(this).offset();
      var top = link_offset.top;
      var left = link_offset.left + $(this).width();
      var styles = {
        'top': top + 'px',
        'left': left + 'px'
      }
    $('&lt;div id="hovercard"&gt;hi there&lt;/div&gt;').hide().css(styles).prependTo('body').fadeIn();
    }, 
    timeout: 1000, 
    out: function() {
      // hide card
      $('#hovercard').fadeOut(function() {
        $(this).remove();
      });
    }
});
</code></pre>
