最简单方式是用内联style设置cursor，如；推荐用css类统一控制；自定义光标需配后备值且注意格式与尺寸；js动态切换应操作class而非直接改style。
直接在 HTML 中用 style 属性设置 cursor
最简单的方式是在 或某个元素上加内联 style，比如让整个页面鼠标变成手型：。这种方式生效快、无依赖，适合快速验证或临时修改。但注意：内联样式优先级高，后续 CSS 里同名 cursor 规则可能被覆盖，调试时容易忽略这点。
用 CSS 类统一控制不同区域的光标样式
实际项目中更推荐用 class 控制，比如给按钮加手型、给拖拽区加移动图标、禁用状态显示 not-allowed：
.btn { cursor: pointer; }<br>.draggable { cursor: move; }<br>.disabled { cursor: not-allowed; }常见坑是忘记重置继承——父元素设了 cursor: wait，子元素没显式覆盖，就会一直显示加载图标。建议在通用重置层（如 body）设默认值，再按需覆盖。
自定义图片光标要注意路径和尺寸限制
用 url() 引入自定义光标时，必须配一个后备关键词（如 default），否则加载失败就变成系统默认：cursor: url("icon.cur"), default;。注意：.cur 格式兼容性最好；.png 在 Chrome/Firefox 可用，但 Safari 对非 .cur 支持不稳定；图片尺寸建议 ≤32×32px，超出可能被截断或不显示。另外，本地开发时若用相对路径，要确认路径相对于 CSS 文件位置，不是 HTML 文件。
JavaScript 动态切换 cursor 要避免频繁操作 body.style
需要响应交互（比如 hover 时变光标、按下时变 grabbing）时，别反复写 document.body.style.cursor = "..."，这会触发重排。更稳妥的是切换 class：
element.addEventListener("mousedown", () => {<br> document.body.classList.add("grabbing");<br>});<br>element.addEventListener("mouseup", () => {<br> document.body.classList.remove("grabbing");<br>});对应 CSS 写 .grabbing { cursor: grabbing; }。这样可维护、易调试，也避免鼠标移出窗口后样式残留的问题。
自定义光标在移动端无效，hover 类行为本身也不可靠；如果目标是提升可访问性，优先保证语义化 HTML 和 focus 样式，而不是依赖 cursor 提示。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
