直接在标签加style="cursor: pointer;"可生效，但推荐用css类统一管理；需注意cursor仅改光标形状，不赋予交互功能，且易受pointer-events、z-index、父容器塌陷等影响。
怎么用 CSS 的 cursor 属性控制图片上的鼠标样式
直接在 <img> 标签上加 style="max-width:90%" 就能生效，但更推荐用 CSS 类统一管理，避免内联样式污染结构。
常见误区是只写 cursor: pointer 就以为“可点击”语义自动成立——其实它只是改了光标形状，不改变实际交互行为（比如没加 onclick 或没包裹 <a></a>，用户点了也没反应）。
-
cursor: pointer最常用，表示“这里可以点”，适用于按钮、链接式图片 -
cursor: zoom-in或zoom-out适合图库缩放预览场景 -
cursor: move适合拖拽操作中的图片（如画布元素），但注意浏览器默认不会启用拖拽，得配合draggable="true"和 JS 事件 - 避免用
cursor: none——部分浏览器（尤其是 Safari）对图片禁用该值，或导致意外失焦
为什么给 <img> 加 cursor 有时不生效
最常踩的坑是父容器或祖先元素设置了 pointer-events: none，或者图片被 z-index 覆盖但上层元素没设 cursor，结果鼠标实际悬停在透明层上，根本没触发到 <img> 的样式。
另一个典型情况：图片是响应式布局中通过 max-width: 100% 缩放的，但父容器高度塌陷（比如没设 min-height 或没清除浮动），导致图片渲染区域实际为 0，cursor 自然无处作用。
- 用浏览器开发者工具的“检查元素”功能，确认鼠标悬停时高亮的是
<img>本身，而不是它的空父盒 - 临时加个
outline: 1px solid red看图片是否真有渲染尺寸 - 如果图片在
<picture></picture>或<figure></figure>里，记得样式要写到具体<img>上，而不是只作用于外层标签
要不要用 JavaScript 动态切换 cursor 样式
纯 CSS 能解决 95% 的需求，JS 动态控制只在少数场景必要：比如根据图片加载状态切换（加载中显示 wait，失败显示 not-allowed），或配合拖拽/缩放逻辑实时更新光标。
注意：不要在 mousemove 里反复设置 element.style.cursor，性能差且容易和 CSS 冲突；优先用 class 切换：
.img-loading { cursor: wait; }
.img-error { cursor: not-allowed; }
.img-dragging { cursor: move; }
- 用
img.addEventListener('load', () => img.classList.remove('img-loading'))比手动改style.cursor更可靠 - 动态添加类名时，确保对应 CSS 规则权重不被其他样式覆盖（比如没加
!important，但父选择器太强） - 移动端 Safari 对部分
cursor值（如zoom-in）支持有限，测试时务必真机验证
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
