如何为jQuery.Marquee复制元素重新初始化悬停效果类？

你的问题核心在于：jQuery.Marquee插件会动态复制原始元素，但这些新生成的元素没有被初始化HoverImgFx4实例——你一开始只在页面加载时执行了一次初始化代码，只能处理当时已存在的元素，后续复制出来的元素自然没法触发悬停效果。

下面是两种可靠的解决方案，按推荐程度排序：

方案1：利用jQuery.Marquee的created回调（推荐） #

jQuery.Marquee自带一个created回调事件，会在插件完成元素复制（也就是生成滚动的重复元素）后触发。我们可以把悬停效果的初始化逻辑封装成函数，在页面加载和created回调里分别调用，同时避免重复初始化已处理过的元素。

步骤1：封装初始化函数 #

先把原来的初始化代码改成可复用的函数，并且给已初始化的元素打标记，防止重复创建实例：

function initHoverImgFx() {
  // 选择所有未被初始化的目标元素
  const targetLinks = document.querySelectorAll(
    '[data-fx="4"] > a:not([data-hover-init]), a[data-fx="4"]:not([data-hover-init])'
  );
  
  targetLinks.forEach(link => {
    // 初始化悬停效果
    new HoverImgFx4(link);
    // 添加标记，避免重复处理
    link.setAttribute('data-hover-init', 'true');
  });
}

步骤2：结合Marquee初始化调用函数 #

在页面加载时先处理原始元素，然后在Marquee的created回调里处理新生成的复制元素：

// 页面加载完成后先初始化已有元素
document.addEventListener('DOMContentLoaded', () => {
  initHoverImgFx();
  
  // 初始化Marquee插件，添加created回调
  $('.marquee-left').marquee({
    // 这里放你的Marquee配置项（比如duration、direction等）
    direction: 'left',
    duplicated: true,
    duration: 6000,
    // 关键：元素复制完成后触发的回调
    created: () => {
      initHoverImgFx();
    }
  });
});

方案2：用MutationObserver监听DOM变化（备选） #

如果Marquee的created回调因为版本问题不生效，可以用原生JS的MutationObserver监听滚动容器的DOM变化，一旦有新元素被添加，就自动初始化悬停效果：

document.addEventListener('DOMContentLoaded', () => {
  initHoverImgFx();
  
  // 监听滚动容器的子元素变化
  const marqueeContainer = document.querySelector('.marquee-left');
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      // 当有新元素被添加到容器中时
      if (mutation.addedNodes.length > 0) {
        initHoverImgFx();
      }
    });
  });
  
  // 配置观察选项：监听子元素和后代元素的变化
  observer.observe(marqueeContainer, { childList: true, subtree: true });
  
  // 初始化Marquee
  $('.marquee-left').marquee({
    // 你的配置项
  });
});

为什么你之前的尝试没用？ #

你写的$( '.marquee-left').hover(function(link) { new HoverImgFx4(link) });逻辑不对：

• .hover()是绑定鼠标悬停的事件处理器，但HoverImgFx4是需要在元素创建时就实例化的类，不是事件回调函数
• 这个代码只会给.marquee-left容器绑定悬停事件，不会处理容器内部的动态元素

内容的提问来源于stack exchange，提问作者Jens Nielsen