添加hover信息遮罩后mousemove缩略图切换效果失效如何修复

新增hover遮罩后功能失效的核心原因是：绝对定位的遮罩层叠在图片容器上方，默认会拦截所有鼠标事件，导致下层图片容器接收不到触发信号。除了将mousemove事件绑定目标从.imageHolder改为.info遮罩外，还需要调整以下逻辑：

• 修正鼠标相对位置的计算基准
  原代码的坐标计算逻辑，是基于事件绑定元素取容器偏移值、容器宽度的。绑定目标换成.info后，要确认计算逻辑取到的是整个缩略图容器的真实尺寸和偏移：
  如果.info遮罩没有完全铺满和.imageHolder一致的区域，直接把计算逻辑里的$(this)替换为$(".imageHolder")即可，避免因为遮罩内边距、尺寸不对，导致计算出的鼠标横向位置比例出错。
  对应需要调整的代码片段参考：

  // 原逻辑（仅绑定在.imageHolder时有效）
  // var containerOffset = $(this).offset();
  // var containerWidth = $(this).width();
  
  // 调整后（绑定在.info时也能取到正确值）
  var containerOffset = $(".imageHolder").offset();
  var containerWidth = $(".imageHolder").width();
  var relX = e.pageX - containerOffset.left;
  

• 修正图片节点的查找目标
  原逻辑是从事件绑定元素下查找所有图片节点，计算图片总数、执行切换动作。绑定目标换成.info后，如果遮罩层不是放在.imageHolder内部，会找不到图片列表。需要把图片查找的逻辑明确指定到.imageHolder容器下：

  // 原逻辑
  // var imgList = $(this).find("img");
  
  // 调整后
  var imgList = $(".imageHolder").find("img");
  var totalImgCount = imgList.length;
  

• 最低成本修复方案（无需修改JS逻辑）
  如果你的.info遮罩只是用来展示文本，没有需要点击、悬停交互的按钮/链接，可以直接给遮罩层加一行CSS属性，让鼠标事件穿透遮罩直接落到下层的.imageHolder上，原有所有JS代码完全不需要改动：

  .info {
    pointer-events: none;
  }
  

  注意：如果遮罩层上放了可点击的链接、按钮，不能用这个方案，否则遮罩上的交互会全部失效。

• 排查样式冲突
  确认遮罩的显示/隐藏逻辑没有修改.imageHolder的定位、尺寸、溢出属性，避免图片列表的滑动定位计算出错。

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