纯CSS无法实现真正跟随鼠标的提示框，因CSS无运行时坐标输入能力，必须用JS获取clientX/clientY并动态更新top/left或CSS变量，同时注意移动端兼容、pointer-events设置及尺寸稳定性。
纯 CSS 无法实现真正跟随鼠标的提示框，mousemove 坐标必须由 JavaScript 获取并透传，CSS 只负责渲染和定位。
为什么不能只用 CSS 的 :hover 或 transform
常见错误是试图用 :hover + transform: translate() 模拟跟随效果，结果只是固定偏移；或误以为 cursor: url() 能动态更新位置——它只接受静态路径，不响应坐标变化。真正的“跟随”意味着每个帧都要读取 clientX/clientY，而 CSS 没有运行时输入能力。
必须用 JS 更新绝对定位的 top/left
最直接可靠的方式是操作 DOM 元素的 style.top 和 style.left：
- 提示框元素需设
position: absolute或position: fixed，避免文档流干扰 - 监听
mousemove事件，用event.clientX和event.clientY获取坐标 - 加小偏移（如 +10px）防止遮挡鼠标指针，例如
left = clientX + 10 + 'px' - 务必设
pointer-events: none，否则提示框会拦截后续鼠标事件，导致mouseleave失效
用 CSS 变量 + transform 是更现代的写法
把坐标存进自定义属性，再用 transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) 渲染，性能略优：
-
--x和--y必须显式乘以单位（* 1px），否则calc()计算无效 - 目标容器要设
position: relative或fixed，否则伪元素定位基准错乱 - 若用
::before/::after渲染提示框，需确保content: ""且pointer-events: none - 不要在
body上直接监听 —— 滚动时clientX/Y仍有效，但若混用pageX/Y未减去window.scrollY，提示框会漂移
移动端触摸事件必须单独处理
PC 端靠 mousemove，移动端得监听 touchmove 并取 touches[0].clientX/touches[0].clientY：
- 不能只绑一个事件类型，需同时监听两者并做兼容判断
- 触摸场景下，提示框常因手指遮挡难以看清，建议加
z-index: 9999和足够对比度背景 - iOS Safari 在惯性滚动中可能不触发
touchmove，需 fallback 到scroll+requestAnimationFrame补帧
容易被忽略的是：提示框尺寸变化（比如文字长度不同）会导致每次重排定位失效，所以实际项目中建议用固定宽高+省略号，或提前测算最大内容尺寸预留空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
