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 看起来像“这个按钮点不了”，但它本身不阻止点击行为——只是改了个图标。用户真点了，事件照常触发，容易引发逻辑错乱。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 真正禁用交互，得配合 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 还挂着

浏览器不会自动帮你记住光标该是什么样子，它只忠实地执行你最后写的那条规则。最麻烦的不是写不对，而是写对了却没生效，还找不到哪一层把它悄悄改掉了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！