Question

在我的页面上，我打印了一个缩略图和一个项目的标题，该项目是通过他们的API从亚马逊自动提取的。因为同时显示所有相关数据很难看，我有一个弹出窗口，它以缩略图为中心，显示完整的标题，更大的图片和价格。

商店项目设置为相对位置，弹出窗口设置为绝对，以便我可以将它们直接放在缩略图上。这很好用，但问题是，如果我移动鼠标太快，我可以打开多个弹出窗口，它们不会关闭。

我玩弄了一个想法，即如果鼠标不在任何一个上面，不断尝试关闭弹出窗口，但我无法弄清楚如何做到这一点。有什么想法吗？

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

编辑：我已经开发了这个页面很长时间了，我忘了它实际上处于半工作点，我可以让你自己看看：http://www.goodpricescome.com/waitlist.php?id=60

我设置了该页面供您试用。如果您在＆＃34;项目条目中输入几个关键字＆＃34;在下面的框中单击自动填充/按回车键，它将自动获取匹配的亚马逊物品。您将能够看到我提到的弹出窗口和行为问题。

Answer 1

您正在实施的行为更像是CSS。

.popupButton>ul {
  display: none;
}

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

但是，如果你想做JS，只需在弹出窗口的包含父对象上定位mouseenter en mouseleave事件（这样当按照定义悬停弹出窗口时，父对象就会悬停）。

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

Answer 2

我想你想用这个

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

如果你真的想用jQuery而不是CSS来实现它，你也可以试试（文档）$ .hover（）（文档）$ .mouseout（）

如何在mouseenter上打开弹出项目，然后在鼠标离开POPUP时将其关闭？

2 个答案: