宏伟的弹出窗口 - 如何在鼠标悬停时打开它？答案

【问题标题】：Magnific popup - how to open it on mouseover?宏伟的弹出窗口 - 如何在鼠标悬停时打开它？
【发布时间】：2017-05-10 18:41:32
【问题描述】：

我正在使用 Magnific 弹出我们的产品产品页面作为图像热点的方法。现在，当您单击热点时，会出现一个带有更大图像和文本的弹出窗口。我收到了在鼠标悬停时打开弹出窗口的请求。

有没有办法在鼠标悬停而不是鼠标点击时触发打开的 Magnific Popup？我试图首先在链接上调用 mouseover 事件，但似乎 Popup 仍然需要单击。如何让它只用鼠标悬停就可以打开？

<!-- Popup link -->
<a href="#test-popup" class="open-popup-link">Show inline popup</a>

<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
  Popup content
</div>

Javascript：

$('.open-popup-link').mouseover(function(){
  $(this).magnificPopup({
    type: 'inline'
  });
});

【问题讨论】：

顺便说一句，有人在没有任何解释的情况下将问题降级，这有点不酷。

标签： magnific-popup

【解决方案1】：

回答我自己的问题。经过一番研究，我发现我需要直接通过 API 打开弹出窗口。现在可以了：

$('.open-popup-link').mouseover(function(){
  $.magnificPopup.open({
    items: {
    src: '.white-popup' // can be a HTML string, jQuery object, or CSS selector
    }
  })
});

工作示例：https://codepen.io/pen/ZKrVNK

通过使用事件委托打开画廊的单独幻灯片的多个链接进一步了解： http://codepen.io/pen/EmEOMa

【讨论】：

您的回答很有帮助。谢谢。