<img>标签默认不触发cursor: pointer，必须显式声明；推荐用class精准控制，避免全局设置；背景图需作用于父容器；移动端忽略该样式但无害；禁用态应使用not-allowed而非default。
图片上 hover 时显示 pointer 手势
默认情况下，<img> 标签不会自动触发 cursor: pointer，哪怕它被绑了点击事件（比如 onclick 或 JS 监听），浏览器也不会主动改鼠标样式。必须显式声明。
最直接的做法是给图片加 CSS：
img {
cursor: pointer;
}
如果只想对特定图片生效，推荐加 class：
<img src="icon.png" class="clickable">
.clickable {
cursor: pointer;
}
- 不要依赖 JS 是否绑了事件来决定是否加 cursor —— 用户看不到 JS，只看视觉反馈
- 避免全局写
img { cursor: pointer }，否则所有图片（包括纯展示图）都会变成手型，违反直觉 - 移动端无效：iOS Safari 和 Android Chrome 在 touch 设备上基本忽略
cursor，但写上无害，不影响 PC 端
让图片在不可点击时显示 default 或 not-allowed
有些图片只是占位符或禁用状态（比如灰掉的图标），这时该用 cursor: default 或 cursor: not-allowed 明确传达状态。
立即学习“前端免费学习笔记（深入）”；
例如禁用态：
<img src="delete.svg" class="disabled">
.disabled {
opacity: 0.4;
cursor: not-allowed;
}
-
not-allowed比default更能表达“当前不可操作”，尤其配合视觉降级（如透明度、滤镜）时效果更一致 - 别用
cursor: none—— 它会让鼠标“消失”，用户无法判断是否悬停成功，且部分浏览器不支持或行为异常 - 如果图片是背景图（
background-image），需作用于其父容器，因为伪元素或背景本身无法独立响应 hover
hover 时动态切换 cursor 的边界问题
有时希望仅在图片内容区域（而非整个盒模型）触发手型，比如图片带 padding/margin/border，或者用了 object-fit: cover 导致实际渲染区域和盒子不一致。
关键点：
-
cursor响应的是元素的盒模型范围（content + padding + border），不是图片像素区域 - 如果图片被裁剪（如
overflow: hidden+object-fit），鼠标移到裁剪外的 padding 区域仍会显示 pointer —— 这容易误导用户 - 解决办法：用
pointer-events: none关闭 padding 区域响应，再用伪元素精确覆盖内容区：
img {
pointer-events: none;
}
img::after {
content: "";
position: absolute;
inset: 0;
pointer-events: auto;
cursor: pointer;
}
注意：这需要父容器设 position: relative，且仅适用于已知尺寸或可定位的场景。
兼容性与 SSR/框架中容易漏掉的地方
在 React/Vue 等框架里，常有人把 cursor 写在内联 style 里：
<img style={{ cursor: 'pointer' }} ... />
这看似可行，但会覆盖外部 CSS 的 hover 状态控制 —— 比如你原本想 hover 时才显示 pointer，结果一渲染就永远是手型。
- 优先用 class 控制，保留 :hover 伪类能力：
.icon:hover { cursor: pointer; } - 服务端渲染（SSR）时，若图片初始不可交互（比如加载中），别提前写死
cursor: pointer，等状态就绪再切 class - Firefox 对
cursor: zoom-in/zoom-out支持较晚（v73+），旧项目慎用；grab/grabbing在 Safari 上曾有延迟，现在基本稳定
真正麻烦的不是怎么写 cursor，而是什么时候不该写 —— 图片语义没明确可交互前，别急着加 pointer。
