title: How do I open a popup item on mouseenter and then close it when the mouse leaves the POPUP?
body: <p>On my page I'm printing a thumbnail and title of an item auto-fetched from amazon through their API. Because it's ugly to show all the relevant data at once, I have a popup that centers itself on the thumbnail and shows the full title, a larger pic, and the price. </p>
  
  <p>The store items are set to relative position and the popup to absolute so that I can center them directly on the thumbnail. That works perfectly, but the problem is that if I move the mouse too fast, I can open multiple popups and they don't close. </p>
  
  <p>I toyed with the idea of having an interval constantly trying to close the popups if the mouse isn't over any of them, but I couldn't figure out how to do that exactly. Any ideas?</p>
  
  <pre><code>$(document).on('mouseenter','.stores_item',function(){
      $('.amaz_pop').hide();                      // Hide any and all open pops.
      var pop = $(this).find('.amaz_pop');
      pop.center();
      pop.myshow();
  });
  $(document).on('mouseleave','.amaz_pop',function(){
      $(this).hide();
  });
  </code></pre>
  
  <p>EDIT: I've been developing this page for so long, I forgot that it's actually at a semi-working point and I can let you see for yourself: <a href="http://www.goodpricescome.com/waitlist.php?id=60" rel="nofollow">http://www.goodpricescome.com/waitlist.php?id=60</a></p>
  
  <p>I set that page up for you to try it. If you enter a few keywords in the "item entry" box below and click autofill/press enter, it will auto-get Amazon items that match. You'll be able to see the pop ups and the behavior issues I mentioned.</p>