直接用CSS cursor属性即可替换默认鼠标指针，无需JS；最安全的是cursor: pointer;，兼容性100%；自定义图片须写为cursor: url("x.cur"), auto;，必须带fallback且尺寸≤32×32px。

如何用 CSS 的 cursor 属性替换默认鼠标指针

直接生效、无需 JS：所有现代浏览器都支持 cursor，只需写在元素的样式里。注意它不继承父级（除非显式设为 inherit），所以按钮、链接等交互元素要单独加。

常见可选值包括：pointer（手型）、text（I 形）、move、not-allowed；也支持自定义图片，但有尺寸和格式限制。

• cursor: pointer; 是最安全的替代方案，语义清晰且兼容性 100%
• 用图片时必须带尺寸声明，例如 cursor: url("hand.cur"), auto;；.cur 或 .png（需指定宽高）才可靠，.jpg 不被支持
• 自定义图片超过 32×32 像素时，部分浏览器会缩放或截断，建议严格控制在系统标准尺寸内

自定义 cursor 图片失效的几个典型原因

不是代码写错，而是资源加载或格式踩了坑。浏览器对 cursor 图片非常挑剔，稍有偏差就自动回退到默认箭头。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 路径错误或 404：检查 DevTools 的 Network 面板，确认 url(...) 对应的文件真实返回 200
• 缺少 fallback 值：cursor 必须至少有一个备选，例如 cursor: url("icon.png"), default;；漏掉逗号后的 default 或 auto 会导致整条规则无效
• PNG 无透明通道或尺寸非 24×24 / 32×32：即使显示正常，某些 Chrome 版本仍拒绝渲染；用 convert -resize 32x32 -background none -alpha on icon.svg icon.png 生成更稳妥
• HTTPS 页面加载 HTTP 图片：混合内容会被拦截，确保 url() 使用相对路径或同协议绝对路径

React/Vue 中动态切换 cursor 的注意事项

组件内用内联样式或 className 控制 cursor 没问题，但要注意状态更新时机和 CSS 优先级。

立即学习“前端免费学习笔记（深入）”；

• 避免用 style={{ cursor: isDragging ? 'grabbing' : 'grab' }} 在拖拽中频繁触发重排；改用 class 切换更稳定
• 全局禁用交互时（如 loading 状态），别只给 body 加 cursor: wait —— 要配合 pointer-events: none，否则按钮仍可点击
• 第三方 UI 库（如 Ant Design）可能自带 cursor 规则，用 !important 强覆盖是临时解法，优先查其文档看是否提供 className 或 style 注入点

移动端 Safari 和旧版 Edge 的兼容性现实

自定义图片 cursor 在 iOS Safari 完全不生效，Android Chrome 仅支持 .cur 格式（PNG 无效）；IE10+ 支持基础值，但 zoom-in/zoom-out 等新值需 Edge 12+。

• 如果项目必须兼顾 iOS，放弃图片 cursor，改用语义化基础值 + 视觉反馈（比如按住时加边框/阴影）来模拟效果
• cursor: context-menu 在 Safari 上表现不稳定，慎用于右键菜单触发区域
• 测试时别只看桌面 Chrome：用真机 Safari 打开，观察是否悄悄回退成默认箭头——这是最常见的“以为生效了”陷阱

实际用起来，最麻烦的从来不是写那行 cursor，而是图片路径对不对、fallback 写没写、移动端有没有悄悄失效。尤其上线前在 iPhone 上点几下，比任何文档都管用。