如何让Flickity轮播画廊所有单元格的悬浮文本跟随光标？

你需要把单个元素的选择逻辑改成针对所有单元格的通用处理，核心是通过事件委托和DOM遍历定位当前悬浮单元格内的文本元素，不用为每个单元格单独编写JS代码。具体实现步骤如下：

1. 统一文本元素的类名 #

给所有需要跟随光标移动的文本div添加同一个类名，比如follow-cursor，替换原来的myDiv1这类唯一ID。

2. 修改JS逻辑 #

替换你原来的代码，改成以下通用逻辑：

// 存储当前处于激活状态的跟随文本元素
let activeCursorText = null;

// 监听全局鼠标移动事件，仅处理激活状态的文本
document.addEventListener('mousemove', function(e) {
  if (!activeCursorText) return;
  
  // 设置文本元素跟随光标位置
  activeCursorText.style.top = `${e.pageY}px`;
  activeCursorText.style.left = `${e.pageX}px`;
});

// 为所有画廊单元格绑定悬浮事件
document.querySelectorAll('.gallery-cell').forEach(cell => {
  // 鼠标进入单元格时，激活对应文本元素
  cell.addEventListener('mouseenter', function() {
    activeCursorText = this.querySelector('.follow-cursor');
    if (activeCursorText) activeCursorText.style.display = 'block';
  });
  
  // 鼠标离开单元格时，取消激活并隐藏文本
  cell.addEventListener('mouseleave', function() {
    if (activeCursorText) {
      activeCursorText.style.display = 'none';
      activeCursorText = null;
    }
  });
});

3. 配合CSS调整定位规则 #

确保文本元素和父单元格的定位属性正确，避免偏移问题：

.gallery-cell {
  position: relative; /* 作为绝对定位元素的参考容器 */
}

.follow-cursor {
  position: absolute; /* 基于父单元格定位 */
  display: none; /* 默认隐藏，悬浮时显示 */
  pointer-events: none; /* 避免文本元素干扰鼠标事件 */
  /* 可添加自定义样式：字体、颜色、间距等 */
}

逻辑说明 #

• 用activeCursorText变量跟踪当前需要移动的文本元素，避免每次鼠标移动都遍历DOM，提升性能。
• 通过mouseenter/mouseleave事件锁定当前悬浮的单元格，只处理该单元格内的文本元素。
• 使用querySelector定位元素，不依赖唯一ID，自动适配所有画廊单元格。

内容的提问来源于stack exchange，提问作者Anders Goberg