替换单击事件以使用悬停打开精彩弹出窗口

Question

我的图像已经有一个点击事件来打开华丽的弹出灯箱，但我需要删除它并替换为打开灯箱的悬停。

试过这个但没有骰子：

<script type="text/javascript">
    jQuery(document).mouseover(function(){
        jQuery('a.et_pb_lightbox_image').magnificPopup({type:'image'});
           });
</script>

这是我的 html：

<a href="https://blackdot.strutcreativestudios.com/wp-content/uploads/2018/04/Deep-Bevel.jpg" class="et_pb_lightbox_image">
  <span class="et_pb_image_wrap">
    <img src="https://blackdot.strutcreativestudios.com/wp-content/uploads/2018/04/Deep-Bevel.jpg" alt="">
  </span>
</a>

这是单击图像并打开灯箱时的html：

<div class="mfp-bg mfp-ready"></div>
<div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready" tabindex="-1" style="overflow-x: hidden; overflow-y: auto;">
    <div class="mfp-container mfp-s-ready mfp-image-holder">
        <div class="mfp-content">
            <div class="mfp-figure">
                <button title="Close (Esc)" type="button" class="mfp-close">×</button>
                <figure>
                    <img class="mfp-img" alt="" src="https://blackdot.strutcreativestudios.com/wp-content/uploads/2018/04/Deep-Bevel.jpg" style="max-height: 318px;">
                    <figcaption>
                        <div class="mfp-bottom-bar">
                            <div class="mfp-title"></div>
                                <div class="mfp-counter"></div>
                            </div>
                    </figcaption>
                </figure>
            </div>
        </div>
        <div class="mfp-preloader">Loading...</div>
    </div>
</div>

更新：我离得更近了一点...试过了，但没有骰子：

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('a.et_pb_lightbox_image').bind('mouseover', function(event){
  .magnificPopup();
  });
});
</script>

然后我尝试了这个来测试绑定组件，它起作用了：

<script type="text/javascript">
jQuery(document).ready(function() {
  ('a.et_pb_lightbox_image').bind('mouseover', function(event){
  alert('Hi there!');
  });
});
</script>

这意味着该.magnificPopup();部分中的某些内容不正确。查看了文档，但似乎这是正确的？谁能说出我错过了什么？

解决：

感谢@Janis和这里的解决方案 - 用悬停而不是单击触发花哨框？以下是我让它最终工作的方式：

<script type="text/javascript">
 jQuery(document).ready(function() {
  jQuery('a.et_pb_lightbox_image').magnificPopup().hover(function() {
   jQuery(this).click();
  });
 });
</script>

Answer 1

您可以尝试在hover事件中触发click事件。