鼠标位置驱动背景移动失效问题：覆盖Div场景下的解决方案

你实现了鼠标位置控制背景图移动的交互，但当有div覆盖在背景元素上时，效果失效。已知pointer-events:none可以解决，但需要更优方案，既保留背景响应鼠标的能力，又不影响上层元素的交互。

核心问题是原代码将mousemove事件绑定在.hover-image元素上，当上层元素覆盖时，鼠标事件被上层元素捕获，无法传递到.hover-image。以下是两种更优方案：

方案一：绑定事件到父容器（推荐） #

将事件绑定到.bg（.hover-image和上层元素的共同父容器），这样鼠标在.bg范围内的任何位置移动，都会触发事件，同时上层元素仍能正常响应自身的鼠标交互。

修改后的JavaScript代码：

$(document).ready(function() {
  var movementStrength = 50;
  let height = movementStrength / $(window).height();
  let width = movementStrength / $(window).width();

  // 窗口大小变化时重新计算比例
  $(window).resize(function() {
    height = movementStrength / $(window).height();
    width = movementStrength / $(window).width();
  });

  // 绑定事件到.bg容器
  $(".bg").mousemove(function(e) {
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = width * pageX * -1 - 25;
    var newvalueY = height * pageY * -1 - 50;
    // 操作当前容器内的.hover-image
    $(this).find('.hover-image').css("background-position", `${newvalueX}px ${newvalueY}px`);
  });
});

优势： #

• 上层元素（如.container内的span）依然可以正常响应点击、hover等交互，不会像pointer-events:none那样失去交互能力。
• 事件绑定范围精准，仅针对需要背景移动的区域，避免全局事件的性能损耗。

方案二：事件委托到全局（备选） #

如果父容器结构不固定，可以将事件委托到document，通过判断鼠标是否在.bg范围内来触发背景移动：

$(document).ready(function() {
  var movementStrength = 50;
  let height = movementStrength / $(window).height();
  let width = movementStrength / $(window).width();

  $(window).resize(function() {
    height = movementStrength / $(window).height();
    width = movementStrength / $(window).width();
  });

  $(document).mousemove(function(e) {
    // 判断鼠标是否在某个.bg元素内
    const $targetBg = $(e.target).closest('.bg');
    if ($targetBg.length) {
      var pageX = e.pageX - ($(window).width() / 2);
      var pageY = e.pageY - ($(window).height() / 2);
      var newvalueX = width * pageX * -1 - 25;
      var newvalueY = height * pageY * -1 - 50;
      $targetBg.find('.hover-image').css("background-position", `${newvalueX}px ${newvalueY}px`);
    }
  });
});

说明： #

• 这种方案适合动态生成.bg元素的场景，但全局事件可能带来微小的性能开销，优先推荐方案一。

内容的提问来源于stack exchange，提问作者Erwin van Ekeren