Magnific popup - how to open it on mouseover?

问题:

I'm using Magnific popup our product product pages as a method for image hot points. Right now when you click on a hot point a popup appears with larger image and text. I received a request to open the popup on a mouseover.

Is there a way to trigger open Magnific Popup on a mouseover not on a mouse click? I was trying to call the mouseover event on the link first, but it seems the Popup still requires a click. How to I make it so it opens up just with a mouseover?

<!-- 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'
  });
});

回答1:

Answering my own question. After a bit more research I found that I needed to open the popup directly via API. It works now:

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

Working example: https://codepen.io/pen/ZKrVNK

Taking it further with multiple links opening separate slides of a gallery, using event delegation: http://codepen.io/pen/EmEOMa