华丽的弹出窗口 - 如何在鼠标悬停时打开它？

Question

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

有没有办法在 鼠标悬停 而不是鼠标点击时触发打开的 Magnific Popup？我试图先在 link 上调用鼠标悬停事件，但 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'
  });
});

Answer 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

华丽的弹出窗口 - 如何在鼠标悬停时打开它？

Magnific popup - how to open it on mouseover?

magnific-popup