必须用 javascript 监听 mousemove 并动态更新元素 transform 实现鼠标跟随，因为 cursor 属性仅能更换静态图标，无法位移、缩放或响应交互，且在编辑器中存在兼容性、坐标偏移、z-index 截断、触屏失效及高 dpi 偏移等多重限制。
HTML 编辑器里加鼠标跟随效果，不能只靠 cursor 属性；真要“元素跟着鼠标跑”，必须用 JavaScript 监听 mousemove（或 pointermove），再动态更新 DOM 元素的 transform。而纯 CSS 的 cursor: url(...) 只能换图标，不支持位移、缩放、发光等交互逻辑。
为什么 cursor 属性做不出“跟随”效果
它只控制系统光标图标的显示，浏览器强制把它画在最上层、且无法用 JS 读取位置或修改样式（比如加阴影、改大小）。你设了 cursor: url('dot.png'), auto，那个 dot 就是静态贴在指针尖上的，不会滞后、不会缓动、不能响应点击状态变化——更别说在编辑器里避开代码高亮层、悬浮菜单或行号栏了。
常见误判：contenteditable 区域或 textarea 里直接套 cursor 样式，结果自定义图标在 Chrome 里失效、Safari 里偏移、移动端完全不显示。这不是写法错，是能力边界问题。
- 预定义值如
text、default在编辑器中仍有效，但仅用于语义提示 -
url()图像需为.cur格式才稳定支持热点（hotspot），.png在 Firefox 中可能默认以左上角为锚点，导致点击位置偏差 - 编辑器容器若用了
transform: scale(1.2)或zoom，cursor图像不会自动缩放适配，得手动处理 DPR
mousemove + transform: translate() 是唯一可靠路径
编辑器里要实现一个“小圆点绕着光标转半圈再跟上”或“悬停代码块时放大光标”，核心就是监听事件 + 插值计算 + 硬件加速渲染。别碰 left/top，它们会触发重排，编辑器滚动时直接卡顿。
- 监听目标必须是
document，不是编辑器容器本身——否则鼠标移出代码区就断连 - 坐标用
e.clientX/e.clientY，不是pageX/pageY，避免滚动偏移干扰 - 跟随元素必须设
position: fixed和pointer-events: none，否则会吞掉mousedown事件，编辑器无法聚焦 - 初始化时记得减去元素自身宽高一半：比如 12×12 的圆点，要用
translate(${e.clientX - 6}px, ${e.clientY - 6}px)
示例片段（无缓动）：
const follower = document.getElementById('cursor-follower');
document.addEventListener('mousemove', e => {
follower.style.transform = `translate(${e.clientX - 6}px, ${e.clientY - 6}px)`;
});
编辑器场景下必须处理的三个坑
普通网页能跑通的代码，在编辑器里大概率出问题——因为编辑器有行号、折叠箭头、悬浮 tooltip、语法高亮层、甚至 iframe 嵌入的预览窗。这些都会破坏跟随逻辑。
-
z-index 被吃掉：编辑器主区域常设
contain: layout paint或父级有transform，导致fixed元素被截断。解法是把跟随元素挂到document.body最外层，并确保其父级没创建新层叠上下文 -
触摸设备完全失效：
mousemove在 iOS Safari 和 Android Chrome 的编辑器中基本不触发。必须同时监听touchmove，取e.touches[0].clientX，并加e.preventDefault()阻止页面滚动（但注意：这会让用户无法用手指拖动编辑器内容，需判断是否在可滚动区域） -
高 DPI 屏幕偏移：Retina 屏下
clientX是 CSS 像素，但若编辑器用了window.devicePixelRatio > 1下的 canvas 渲染或自定义渲染层，坐标需除以 DPR 才对齐。简单粗暴法是监听resize事件后重算缩放系数
想加缩放/发光/颜色变化？用 CSS 变量桥接 JS
不要在 JS 里拼 style.boxShadow 字符串——难维护、易 XSS、动画卡顿。把动态参数抽成 CSS 变量，JS 只负责更新变量值，CSS 负责过渡和渲染。
CSS：
#cursor-follower {
--glow-size: 8px;
--glow-blur: 12px;
--glow-color: hsl(200, 90%, 60%);
box-shadow: 0 0 var(--glow-blur) var(--glow-size) var(--glow-color);
transition: box-shadow 0.2s ease-out;
}
JS：
document.addEventListener('mousemove', e => {
follower.style.setProperty('--glow-color', `hsl(${e.clientX % 360}, 90%, 60%)`);
follower.style.transform = `translate(${e.clientX - 6}px, ${e.clientY - 6}px)`;
});
这样既保持性能，又让设计师能直接改 CSS 控制发光强度、颜色节奏，不用动 JS 逻辑。
真正难的不是让光标动起来，而是它在编辑器里缩放、滚动、触屏、高 DPI、多语言字符混合渲染时，始终对准光标热区——这些细节不压测到真实编辑场景，上线前根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
