Question

我正在使用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'
  });
});

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弹出窗口 - 如何在鼠标悬停时打开它？

1 个答案: