纯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 会让桌面端空白。两者都得监听，并统一提取坐标：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 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 更轻量，但容易因单位缺失或定位上下文错乱而失效：
- 伪元素必须设
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，或提前测算最大内容尺寸预留空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
