纯CSS无法实现真正跟随鼠标的定位效果，必须用JavaScript监听mousemove和touchmove事件实时更新--mouse-x/--mouse-y变量，再通过伪元素结合calc()和transform渲染，且需处理滚动、缩放、事件拦截及尺寸浮动等问题。
纯 CSS 无法实现真正跟随鼠标的定位效果，必须用 JavaScript 获取坐标并透传给 CSS 变量；CSS 只负责用 calc() 和 transform 渲染位置。
为什么不能只靠 :hover 或 cursor: url()
常见错误是以为 :hover + transform: translate() 能模拟跟随——它只是固定偏移，鼠标一动就脱节；cursor: url() 的路径是静态字符串，浏览器不会在每次移动时重新解析或重载图片。真正的“跟随”要求每帧读取 clientX/clientY，而 CSS 没有运行时输入能力。
必须监听 mousemove 和 touchmove 并更新 --mouse-x / --mouse-y
只绑 mousemove 会导致移动端失效；只绑 touchmove 会让桌面端空白。两者都得监听，并统一提取坐标：
- PC 端用
e.clientX/e.clientY - 移动端从
e.touches[0]取clientX/clientY，避免touches为空时报错 - 用
requestAnimationFrame节流，避免高频触发挤占主线程 - 更新 document.documentElement.style.setProperty()，例如：
document.documentElement.style.setProperty('--mouse-x', e.clientX)
::before 伪元素定位的关键写法
用伪元素比新增 DOM 更轻量，但容易因单位缺失或定位上下文错乱而失效：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
立即学习“前端免费学习笔记（深入）”；
- 伪元素必须设
content: ""和position: fixed（或absolute，取决于容器） -
transform: translate(calc(var(--mouse-x, 0) * 1px), calc(var(--mouse-y, 0) * 1px))——* 1px不可省，否则calc()计算结果为NaN - 务必加
pointer-events: none，否则伪元素会拦截后续事件，导致mouseleave失效 - 若目标容器用了
transform、perspective或filter，伪元素的fixed定位可能被截断，此时改用absolute并确保父容器position: relative
滚动与缩放场景下的漂移问题
页面滚动时 clientX/clientY 本身有效，但若混用 pageX/pageY 且未减去 window.scrollY，光标就会向下漂移；缩放（zoom 或 transform: scale()）也会让像素换算失准：
- 始终优先用
clientX/clientY，它们不受滚动影响 - 避免在
body上直接监听事件——iOS Safari 在惯性滚动中可能丢touchmove，建议监听document并 fallback 到scroll+rAF补帧 - 不要依赖
window.devicePixelRatio做手动缩放补偿，现代浏览器对transform: translate()的像素计算已自动适配
最易被忽略的是：伪元素尺寸变化（比如文字提示框内容长度浮动）会破坏定位基准，实际项目中建议用固定宽高+text-overflow: ellipsis，或提前测算最大内容尺寸预留空间。
