JS实现小手状

使用CSS cursor属性实现小手状

在HTML元素上直接添加CSS的cursor: pointer样式，鼠标悬停时会自动显示为手型图标。这是最简单的方法，无需JavaScript：

<div style="cursor: pointer">点击我</div>

通过JavaScript动态修改cursor样式

通过JavaScript动态修改元素的style.cursor属性，实现交互时的手型效果：

document.getElementById("myElement").style.cursor = "pointer";

自定义手型光标图片

若需使用自定义图像作为光标，可通过CSS的cursor属性结合URL实现：

const element = document.querySelector(".custom-cursor");
element.style.cursor = "url('path/to/cursor-image.png'), auto";

监听事件触发光标变化

结合事件监听器，在鼠标悬停或点击时切换光标样式：

const button = document.querySelector("button");
button.addEventListener("mouseover", () => {
  button.style.cursor = "pointer";
});
button.addEventListener("mouseout", () => {
  button.style.cursor = "default";
});

注意事项

• 系统默认的pointer光标在不同操作系统中表现一致，无需额外兼容性处理。
• 自定义光标图片建议使用.cur或.png格式，尺寸通常为32x32像素。
• 若需兼容旧版浏览器，避免使用复杂光标样式。