将图片点击触发Magnific Popup改为悬停触发的问题求助

你的问题出在把Magnific Popup的初始化逻辑放在了全局的mouseover事件里，这会导致重复初始化插件，而且没有主动调用弹窗的打开方法。下面给你一套可行的解决方案：

问题分析 #

你之前的代码只是在鼠标经过文档时重复初始化弹窗插件，但并没有触发弹窗的打开动作。而且默认情况下，Magnific Popup会绑定点击事件来触发弹窗，所以我们需要先解绑默认的点击事件，再绑定悬停触发逻辑。

正确代码实现 #

jQuery(document).ready(function($) {
  // 1. 一次性初始化Magnific Popup（不要放在鼠标事件里重复初始化）
  $('.et_pb_lightbox_image').magnificPopup({
    type: 'image',
    closeOnBgClick: true, // 点击背景关闭弹窗，可根据需求调整
    closeOnContentClick: false // 点击图片内容不关闭，可根据需求调整
  });

  // 2. 移除插件默认绑定的点击事件（避免点击时仍触发弹窗）
  $('.et_pb_lightbox_image').off('click');

  // 3. 绑定鼠标进入事件，触发弹窗打开
  $('.et_pb_lightbox_image').on('mouseenter', function() {
    $(this).magnificPopup('open');
  });

  // 可选：如果需要鼠标离开时自动关闭弹窗，添加下面这段
  $('.et_pb_lightbox_image').on('mouseleave', function() {
    $.magnificPopup.close();
  });
});

关键细节说明 #

• 用mouseenter替代mouseover：mouseover会在元素的子节点上反复触发，而mouseenter只在鼠标首次进入元素时触发一次，体验更流畅。
• 初始化只做一次：把Magnific Popup的初始化放在document.ready里，确保DOM加载完成后只执行一次，避免重复绑定导致的冲突。
• 主动调用open方法：悬停时需要手动调用magnificPopup('open')来触发弹窗，而不是只初始化插件。

内容的提问来源于stack exchange，提问作者Bree Reese