js怎么改变鼠标的样子

用户体验: 通过改变鼠标指针的样式，可以向用户提供视觉反馈，表明当前元素的可交互性。
直观指示: 比如，当鼠标悬停在可点击的链接上时，显示为手形图标，可以直观地告诉用户该链接是可以点击的。

在JavaScript中，可以通过CSS样式来改变鼠标指针的外观。这通常是通过设置元素的cursor属性来实现的。以下是一些常见的鼠标指针样式及其应用场景：

基础概念

cursor: CSS属性，用于指定鼠标指针在元素上时的外观。

类型与应用场景

auto: 默认值，浏览器根据元素类型自动设置光标样式。
pointer: 表示元素是可点击的，如链接或按钮。
text: 表示元素是文本，允许用户选择和编辑。
wait: 表示页面正在加载或处理请求，通常显示为沙漏或圆圈。
help: 表示元素提供帮助信息，通常显示为问号或气球。
crosshair: 表示精确选择或定位，常用于绘图工具。
move: 表示元素可以被移动，常用于拖放操作。
not-allowed: 表示操作不被允许，常用于禁用的按钮或功能。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Cursor Example</title>
<style>
  .link {
    cursor: pointer; /* 链接样式 */
  }
  .text {
    cursor: text; /* 文本样式 */
  }
  .wait {
    cursor: wait; /* 等待样式 */
  }
  .help {
    cursor: help; /* 帮助样式 */
  }
  .crosshair {
    cursor: crosshair; /* 十字准线样式 */
  }
  .move {
    cursor: move; /* 移动样式 */
  }
  .not-allowed {
    cursor: not-allowed; /* 不允许样式 */
  }
</style>
</head>
<body>

<div class="link">Hover over me (pointer)</div>
<div class="text" contenteditable="true">Edit me (text)</div>
<div class="wait">Please wait (wait)</div>
<div class="help" title="This is help text">Hover for help (help)</div>
<div class="crosshair">Select precisely (crosshair)</div>
<div class="move">Drag me (move)</div>
<div class="not-allowed" disabled>Not allowed (not-allowed)</div>

</body>
</html>