cursor: pointer 在 div 上不生效主因是缺乏交互语义或被样式压制；需绑定事件、设 tabindex，或排查 pointer-events、CSS 优先级、伪元素尺寸等问题。
cursor: pointer 为什么在 div 上不生效
不是语法写错了，而是元素缺乏交互语义或被样式压制。浏览器（尤其是 Safari）对非原生可交互元素（如 div、span）的 cursor 渲染更保守：它可能只在该元素绑定了 click 事件、或设置了 tabindex 时才真正显示手型。
常见干扰项包括：
-
pointer-events: none父元素直接禁用所有鼠标响应，子元素再设cursor也无效 - CSS 优先级被覆盖，比如全局重置规则
* { cursor: default; }写在后面，会把你的pointer覆盖掉 - 伪元素（
::before/::after）上写了cursor，但伪元素本身没内容、没尺寸、没背景，悬停区域实际是空的
:hover + cursor 组合在链接和按钮上最可靠
a 和 button 元素天生具备交互语义，cursor: pointer 几乎零配置就能生效。配合 :hover 还能做状态强化：
button {
cursor: pointer;
}
button:hover {
opacity: 0.9;
}
button:active {
cursor: grabbing;
}注意点：
立即学习“前端免费学习笔记（深入）”；
-
:active中设grabbing是视觉反馈，但不能替代真实拖拽逻辑 -
grab/grabbing在旧版 Safari 和部分安卓 WebView 中会回退到default，别把它当功能开关用 - 如果按钮有
disabled状态，记得单独加类控制：.btn:disabled { cursor: not-allowed; }
自定义图片光标必须带 fallback 且路径可访问
用 url() 加载光标图标时，浏览器会严格校验格式与上下文。下面这行看着没问题，但极大概率静默失效：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
cursor: url("hand.png");正确写法必须包含后备值，并满足硬性条件：
- 尺寸 ≤ 128×128px（Chrome 强制限制，超限直接忽略整条声明）
- 必须接一个关键词 fallback，例如
cursor: url("hand.cur"), auto;—— 缺少auto或default，整个cursor属性会被丢弃 -
.cur格式比.png兼容性好得多；.png不支持 hotspot 定义，点击热区默认落在左上角，容易偏移 - 本地开发用
file://协议时，Chrome 会拦截url()加载，必须起一个本地服务（如python3 -m http.server）预览
JS 动态切换 cursor 应操作 class，而非直接改 style
频繁设置 document.body.style.cursor = 'wait' 不仅触发重排，还容易在异常中断后残留样式（比如鼠标移出窗口再回来，光标卡在 wait 状态）。
推荐方案是用 class 控制：
.is-loading { cursor: wait; }
.is-grabbing { cursor: grabbing; }然后 JS 只负责增删 class：
button.addEventListener('mousedown', () => {
document.body.classList.add('is-grabbing');
});
button.addEventListener('mouseup', () => {
document.body.classList.remove('is-grabbing');
});关键细节：
- 监听
mouseup要绑定到document，而不是按钮本身——防止鼠标拖出按钮范围后无法恢复 - 移动端没有
hover和稳定active，这类光标切换在触屏设备上基本不可见，别把它当核心交互提示 - 如果页面有多个“加载中”状态，建议用 scoped class（如
.panel.is-loading { cursor: wait; }），避免污染全局
实际项目里最容易被忽略的是 fallback 值和伪元素悬停区域不匹配这两点。前者导致自定义光标完全不出现，后者让人以为 CSS 写错了，其实只是你根本没悬停到那个有 cursor 的像素上。
