如何在Magic Mouse JS中修改光标颜色及实现分区域变色

一、修改全局光标颜色 #

Magic Mouse JS生成的外层光标元素带有magic-cursor__outer类，默认是白色边框，直接用CSS覆盖即可：

/* 全局修改为红色边框光标 */
.magic-cursor__outer {
  border-color: #ff0000 !important;
}

/* 如果是填充型光标（比如circle-small），修改背景色 */
.magic-cursor__outer {
  background-color: #ff0000 !important;
}

注：添加!important是为了覆盖插件的内联样式优先级，也可以用更具体的CSS选择器提升优先级。

二、分区域动态切换光标颜色 #

通过监听鼠标在不同区域的进入/离开事件，动态修改光标样式：

步骤1：给目标区域添加标识 #

给需要区分的section设置id或类：

<section id="section1">第一区域内容</section>
<section id="section2">第二区域内容</section>

步骤2：编写JS切换逻辑（类切换方式，推荐） #

用CSS类管理不同颜色，避免直接操作元素样式，更易维护：

/* 定义不同颜色的光标类 */
.cursor-red .magic-cursor__outer {
  border-color: #ff0000 !important;
}
.cursor-blue .magic-cursor__outer {
  border-color: #0000ff !important;
}

在现有Magic Mouse初始化代码之后，添加以下脚本：

const body = document.body;
const section1 = document.getElementById('section1');
const section2 = document.getElementById('section2');

section1.addEventListener('mouseenter', () => {
  body.classList.add('cursor-red');
  body.classList.remove('cursor-blue');
});
section1.addEventListener('mouseleave', () => {
  body.classList.remove('cursor-red');
});

section2.addEventListener('mouseenter', () => {
  body.classList.add('cursor-blue');
  body.classList.remove('cursor-red');
});
section2.addEventListener('mouseleave', () => {
  body.classList.remove('cursor-blue');
});

完整代码示例 #

把所有内容整合到你的页面中：

<style>
/* 全局默认光标颜色 */
.magic-cursor__outer {
  border-color: #000000 !important;
}
/* 分区域颜色类 */
.cursor-red .magic-cursor__outer {
  border-color: #ff0000 !important;
}
.cursor-blue .magic-cursor__outer {
  border-color: #0000ff !important;
}
</style>

<section id="section1">第一区域</section>
<section id="section2">第二区域</section>

<script type="text/javascript" src="https://res.cloudinary.com/veseylab/raw/upload/v1684982764/magicmouse-2.0.0.cdn.min.js"></script>
<script type="text/javascript">
  options = {
    "cursorOuter": "circle-basic",
    "hoverEffect": "circle-move", 
    "hoverItemMove": false,
    "defaultCursor": false,
    "outerWidth": 30,
    "outerHeight": 30
  };
  magicMouse(options);

  // 分区域变色逻辑
  const body = document.body;
  const section1 = document.getElementById('section1');
  const section2 = document.getElementById('section2');

  section1.addEventListener('mouseenter', () => {
    body.classList.add('cursor-red');
    body.classList.remove('cursor-blue');
  });
  section1.addEventListener('mouseleave', () => {
    body.classList.remove('cursor-red');
  });

  section2.addEventListener('mouseenter', () => {
    body.classList.add('cursor-blue');
    body.classList.remove('cursor-red');
  });
  section2.addEventListener('mouseleave', () => {
    body.classList.remove('cursor-blue');
  });
</script>

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