How do I open a popup item on mouseenter and then close it when the mouse leaves the POPUP?

Question

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.

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.

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?

$(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();
});

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: http://www.goodpricescome.com/waitlist.php?id=60

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.

Answer 1

The behavior you are implementing is more of a CSS thing.

.popupButton>ul {
  display: none;
}

.popupButton:hover>ul {
  display: block;
  position: absolute;
  /* Addition styles */
}

However, if you want to do it JS, just target the mouseenter en mouseleave events on the containing parent of the popup (so the parent is hovered when the popup is hovered per definition).

<div class="popupButton">
Open it up!
<ul><li><a href="#">My Link</a></li></ul>
</div>

Answer 2

I think you want to use this

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

If you really want to use jQuery instead of CSS to implement this you can also try $(document).hover() $(document).mouseout()