cursor: pointer 无效主因是样式被覆盖或元素不可交互，需检查继承、优先级、元素语义、尺寸及兜底设置。
cursor: pointer 在按钮上没反应？检查是否被其他样式覆盖
很多情况下写上了 cursor: pointer，但鼠标悬停时还是默认箭头，根本不是代码没生效，而是 CSS 优先级或继承关系把它盖掉了。比如父元素设置了 cursor: default，子元素又没显式重置，就会继承过去。
- 用浏览器开发者工具检查实际计算出的
cursor值，看是不是被!important或更高权重的选择器覆盖 - 确保目标元素是“可交互”的语义化标签（如
button、a），或者至少加了role="button"，否则部分屏幕阅读器或旧版 Safari 可能忽略悬停样式 - 如果元素是空的（比如只靠背景图触发点击），记得设置
min-width和min-height，否则它可能宽高为 0，悬停区域不存在
not-allowed 要慎用：别在可点击元素上假装禁用
cursor: not-allowed 看起来像“这个按钮点不了”，但它本身不阻止点击行为——只是改了个图标。用户真点了，事件照常触发，容易引发逻辑错乱。
- 真正禁用交互，得配合
pointer-events: none（彻底拦截）或disabled属性（对button、input有效） - 如果只是视觉提示“暂不可用”，建议同时加
opacity: 0.5和tabindex="-1"，避免键盘用户误触 - 注意 Safari 对
pointer-events: none在某些嵌套场景下有兼容问题，必要时用aria-disabled="true"+ JS 拦截click
自定义光标图片要注意路径和尺寸限制
用 url() 加载自定义 cursor 图片时，浏览器其实很挑剔：路径必须可访问、格式要支持、尺寸最好别超 128×128px，否则可能直接回退到默认箭头。
- 推荐优先使用
.cur格式（Windows 原生），比 PNG 更稳定；若用 PNG，请确保带透明通道且无抗锯齿毛边 - 路径写相对地址时，是以 CSS 文件位置为基准，不是 HTML 页面——容易 404 却查不出原因
- 必须跟一个兜底关键字，比如
cursor: url("hand.cur"), pointer，否则加载失败就啥都没有 - 移动端不支持自定义 cursor，写了也白写
React/Vue 组件里动态切 cursor 很容易漏掉 cleanup
在组件中根据状态切换 cursor（比如 loading 中切 wait），如果只靠 className 控制，没问题；但若用 style.cursor 直接写内联样式，组件卸载前忘了还原，就可能让后续页面所有元素都卡在 wait 状态。
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 类控制更安全，比如
loading类里定义cursor: wait，靠 classList 切换 - 如果必须用内联样式，在
useEffect或onUnmounted里手动设回auto或继承值 - 特别注意异步操作未完成就跳转路由的场景——
fetch还在 pending，组件已销毁，但 cursor 还挂着
