本文详解如何在网页中创建自定义圆形鼠标光标，并通过 CSS 和 JavaScript 协同实现：悬停任意 链接时自动放大光标（如从 40px→80px），带 0.1s 进出过渡动画，兼容嵌套结构与滚动位置，无需依赖第三方库。

本文详解如何在网页中创建自定义圆形鼠标光标，并通过 css 和 javascript 协同实现：悬停任意 `` 链接时自动放大光标（如从 40px→80px），带 0.1s 进出过渡动画，兼容嵌套结构与滚动位置，无需依赖第三方库。

要为作品集网站打造专业、沉浸式的交互体验，一个动态响应的自定义光标是点睛之笔。本教程将手把手带你实现一个支持混合模式（mix-blend-mode: difference）、隐藏原生光标、精准识别所有链接（包括嵌套在

内的 标签）、且悬停/移出均有 0.1 秒平滑缩放过渡的圆形光标系统。

✅ 正确思路：避免 JS 事件绑定陷阱，优先使用 CSS 原生能力

你原始代码中存在两个关键问题：

• 在 mousemove 回调内反复为所有 元素添加 mouseenter/mouseleave 监听器 → 导致内存泄漏与性能浪费；
• 使用 a:hover ~ .cursor 选择器 → 仅匹配 同级后置兄弟元素，而你的 .cursor 是全局固定定位元素，且 多数位于
  或

  内部，无法被该选择器捕获。

✅ 推荐方案：用 :has() 伪类 + 纯 CSS 控制缩放（现代浏览器支持良好，Chrome 105+ / Edge 105+ / Safari 15.4+），简洁、高效、无 JS 侵入。

? 第一步：修正 HTML 结构（确保 .cursor 在 最末尾）

<!-- 其他内容保持不变 -->
<div class="cursor"></div>
<script src="script.js" defer></script>

⚠️ 注意：.cursor 必须是

的直接子元素，否则 :has() 无法跨层级生效。

? 第二步：优化 CSS —— 添加过渡与 :has() 响应逻辑

.cursor {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bf0efe9;
  mix-blend-mode: difference;
  /* 统一设置过渡（作用于所有可变属性） */
  transition: 
    width 0.1s ease, 
    height 0.1s ease,
    transform 0.1s ease;
}

/* 当 body 内任意 <a> 被悬停时，放大光标 */
body:has(a:hover) .cursor {
  width: 80px;
  height: 80px;
}

? :has(a:hover) 会匹配整个文档中任意层级下处于 :hover 状态的 标签，完美解决“嵌套在 div 里不触发”的问题。

? 第三步：修复 JavaScript —— 精准定位光标（适配滚动）

原始 JS 中 e.pageX/Y 未减去滚动偏移，导致光标在页面滚动后严重错位：

// script.js
const cursor = document.querySelector(".cursor");

window.addEventListener("mousemove", (e) => {
  // ✅ 关键修复：减去 scrollX/Y，适配滚动位置
  const x = e.pageX - window.scrollX;
  const y = e.pageY - window.scrollY;

  cursor.style.left = `${x}px`;
  cursor.style.top = `${y}px`;
});

✅ document.querySelector(".cursor") 比 querySelectorAll 更合理（单个光标），避免循环冗余操作。

? 进阶增强（可选）：支持按钮、图片等其他可交互元素

若还需对 、.card:hover、[data-hover] 等触发缩放，只需扩展 :has() 选择器：

body:has(a:hover, button:hover, [data-hover]:hover) .cursor {
  width: 80px;
  height: 80px;
}

⚠️ 注意事项与兼容性提示

• 浏览器兼容性：:has() 在 Safari 15.4+、Chrome/Edge 105+ 中已稳定支持；若需兼容旧版（如 IE 或老 Safari），可回退至 JS 方案（见下方备选）。

• 备选 JS 方案（兼容性兜底）：

  const cursor = document.querySelector(".cursor");
  const links = document.querySelectorAll("a, button, [role='link']");
  
  links.forEach(el => {
    el.addEventListener("mouseenter", () => cursor.classList.add("hover"));
    el.addEventListener("mouseleave", () => cursor.classList.remove("hover"));
  });
  
  // 对应 CSS：
  /* .cursor.hover { width: 80px; height: 80px; } */

• 性能建议：避免在 mousemove 中执行 DOM 查询或复杂计算；本例中已精简为单次查询 + 简单赋值，符合高性能要求。

✅ 最终效果验证

• 移动鼠标 → 光标跟随平滑移动；
• 悬停任意 UI/UX Designer（即使它在
• 内）、

  ...

  或深层嵌套链接 → 光标立即以 0.1s 动画放大；
• 移出链接 → 同样 0.1s 缩小还原；
• 页面滚动后光标仍精准贴合鼠标位置；
• 黑色文字在浅色背景上呈现高对比“反色”效果（得益于 mix-blend-mode: difference）。

现在，你的作品集已拥有媲美高端设计站的微交互质感——简洁、精准、有呼吸感。下一步，可继续拓展：悬停不同元素时切换光标颜色、添加点击波纹、或集成 GSAP 实现弹性缩放。祝你项目顺利上线！