自定义鼠标指针：仅在悬停时启用mix-blend-mode效果

问题说明 #

需要让自定义鼠标指针仅在悬停可交互元素（如<a>标签）时，触发mix-blend-mode: difference混合模式效果，现有自定义指针代码已实现跟随和缩放效果，需补充混合模式的切换逻辑。

修改步骤 #

1. CSS新增状态类
   默认状态保持原有混合模式，新增一个类用于触发悬停时的混合模式切换：

/* 默认状态混合模式 */
body .cursor__ball {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  z-index: 1000;
}
/* 悬停时的混合模式类 */
body .cursor--difference .cursor__ball {
  mix-blend-mode: difference;
}

2. 调整JavaScript事件逻辑
   在鼠标进入可交互元素时给指针容器添加上述类，离开时移除：

// 提前获取指针容器元素，避免重复查询
const $cursor = document.querySelector('.cursor');

// 鼠标进入元素时
function onMouseHover() {
  TweenMax.to($bigBall, .3, {
    scale: 1.7
  });
  $cursor.classList.add('cursor--difference');
}
// 鼠标离开元素时
function onMouseHoverOut() {
  TweenMax.to($bigBall, .3, {
    scale: 1
  });
  $cursor.classList.remove('cursor--difference');
}

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

<!-- 自定义鼠标指针 -->
<div class="cursor">
  <div class="cursor__ball cursor__ball--big ">
    <svg height="30" width="30">
      <circle cx="15" cy="15" r="12" stroke-width="0"></circle>
    </svg>
  </div>

  <div class="cursor__ball cursor__ball--small">
    <svg height="10" width="10">
      <circle cx="5" cy="5" r="4" stroke-width="0"></circle>
    </svg>
  </div>
</div>

<style>
body .cursor {
  pointer-events: none;
}
body .cursor__ball {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  z-index: 1000;
}
body .cursor--difference .cursor__ball {
  mix-blend-mode: difference;
}
body .cursor__ball circle {
  fill: #110075;
}
</style>

<script>
const $bigBall = document.querySelector('.cursor__ball--big');
const $smallBall = document.querySelector('.cursor__ball--small');
const $hoverables = document.querySelectorAll('a');
const $cursor = document.querySelector('.cursor');

// 事件监听
document.body.addEventListener('mousemove', onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {
  $hoverables[i].addEventListener('mouseenter', onMouseHover);
  $hoverables[i].addEventListener('mouseleave', onMouseHoverOut);
}

// 鼠标移动时更新指针位置
window.CP.exitedLoop(0);
function onMouseMove(e) {
  TweenMax.to($bigBall, .4, {
    x: e.clientX - 15,
    y: e.clientY - 15
  });

  TweenMax.to($smallBall, .1, {
    x: e.clientX - 5,
    y: e.clientY - 7
  });
}

// 鼠标悬停元素时的效果
function onMouseHover() {
  TweenMax.to($bigBall, .3, {
    scale: 1.7
  });
  $cursor.classList.add('cursor--difference');
}
function onMouseHoverOut() {
  TweenMax.to($bigBall, .3, {
    scale: 1
  });
  $cursor.classList.remove('cursor--difference');
}
</script>

补充说明 #

• 若只需大球触发混合模式，可将CSS中的.cursor--difference .cursor__ball改为.cursor--difference .cursor__ball--big；
• 如需适配更多可交互元素，扩展$hoverables的选择器即可（如document.querySelectorAll('a, button, .hover-target')）。

内容的提问来源于stack exchange，提问作者Spexagon M.