本文详解如何在网页中创建自定义圆形鼠标光标，并通过 CSS 和 JavaScript 协同实现：悬停任意 链接时自动放大光标（如从 40px→80px），带 0.1s 进出过渡动画，兼容嵌套结构与滚动位置，无需依赖第三方库。
本文详解如何在网页中创建自定义圆形鼠标光标，并通过 css 和 javascript 协同实现：悬停任意 `` 链接时自动放大光标（如从 40px→80px），带 0.1s 进出过渡动画，兼容嵌套结构与滚动位置，无需依赖第三方库。
要为作品集网站打造专业、沉浸式的交互体验，一个动态响应的自定义光标是点睛之笔。本教程将手把手带你实现一个支持混合模式（mix-blend-mode: difference）、隐藏原生光标、精准识别所有链接（包括嵌套在 你原始代码中存在两个关键问题： ✅ 推荐方案：用 :has() 伪类 + 纯 CSS 控制缩放（现代浏览器支持良好，Chrome 105+ / Edge 105+ / Safari 15.4+），简洁、高效、无 JS 侵入。 ⚠️ 注意：.cursor 必须是 ? :has(a:hover) 会匹配整个文档中任意层级下处于 :hover 状态的 标签，完美解决“嵌套在 div 里不触发”的问题。 原始 JS 中 e.pageX/Y 未减去滚动偏移，导致光标在页面滚动后严重错位： ✅ document.querySelector(".cursor") 比 querySelectorAll 更合理（单个光标），避免循环冗余操作。 若还需对 浏览器兼容性：:has() 在 Safari 15.4+、Chrome/Edge 105+ 中已稳定支持；若需兼容旧版（如 IE 或老 Safari），可回退至 JS 方案（见下方备选）。 备选 JS 方案（兼容性兜底）： 性能建议：避免在 mousemove 中执行 DOM 查询或复杂计算；本例中已精简为单次查询 + 简单赋值，符合高性能要求。 现在，你的作品集已拥有媲美高端设计站的微交互质感——简洁、精准、有呼吸感。下一步，可继续拓展：悬停不同元素时切换光标颜色、添加点击波纹、或集成 GSAP 实现弹性缩放。祝你项目顺利上线！✅ 正确思路：避免 JS 事件绑定陷阱，优先使用 CSS 原生能力
或
内部，无法被该选择器捕获。
? 第一步：修正 HTML 结构（确保 .cursor 在 最末尾）
<!-- 其他内容保持不变 -->
<div class="cursor"></div>
<script src="script.js" defer></script>
? 第二步：优化 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;
}</a>
? 第三步：修复 JavaScript —— 精准定位光标（适配滚动）
// 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`;
});
? 进阶增强（可选）：支持按钮、图片等其他可交互元素
body:has(a:hover, button:hover, [data-hover]:hover) .cursor {
width: 80px;
height: 80px;
}
⚠️ 注意事项与兼容性提示
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; } */
✅ 最终效果验证
...
或深层嵌套链接 → 光标立即以 0.1s 动画放大；
