HTML可点击区域鼠标样式的设置教程-html教程-PHP中文网

cursor: pointer 在 div 上不生效主因是缺乏交互语义或被样式压制；需绑定事件、设 tabindex，或排查 pointer-events、CSS 优先级、伪元素尺寸等问题。

html可点击区域鼠标样式的设置教程

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() 加载光标图标时，浏览器会严格校验格式与上下文。下面这行看着没问题，但极大概率静默失效：

cursor: url("hand.png");

正确写法必须包含后备值，并满足硬性条件：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

尺寸 ≤ 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');
});

关键细节：