在文档正文之外设置光标样式

在文档正文之外设置光标样式通常涉及到CSS（层叠样式表）的使用。光标样式可以通过CSS的cursor属性来控制，这个属性允许开发者指定鼠标指针在元素上时的显示样式。

基础概念

CSS cursor属性用于定义鼠标指针在元素上时的显示样式。常见的光标样式包括默认光标、指针光标、文本光标、等待光标等。

类型

CSS cursor属性支持多种预定义的光标类型，包括但不限于：

auto：浏览器设置的光标。
default：箭头光标。
pointer：手形光标，通常用于链接。
text：文本光标，用于可编辑文本。
wait：等待光标，通常是一个沙漏或圆圈。
help：问号光标，表示有帮助信息。
crosshair：十字准线光标。
move：移动光标，用于拖拽操作。
not-allowed：禁止光标，表示操作不被允许。

应用场景

导航链接：使用pointer光标来指示链接可以被点击。
文本编辑区域：使用text光标来指示用户可以输入文本。
加载状态：使用wait光标来指示页面正在加载或处理中。
拖拽功能：使用move光标来指示元素可以被拖拽。

示例代码

以下是一个简单的HTML和CSS示例，展示了如何在不同元素上设置不同的光标样式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursor Styles Example</title>
<style>
  .default-cursor {
    cursor: default;
  }
  .pointer-cursor {
    cursor: pointer;
  }
  .text-cursor {
    cursor: text;
  }
  .wait-cursor {
    cursor: wait;
  }
  .help-cursor {
    cursor: help;
  }
</style>
</head>
<body>

<div class="default-cursor">This is the default cursor.</div>
<div class="pointer-cursor">This cursor looks like a hand and indicates a link.</div>
<div class="text-cursor" contenteditable="true">You can edit this text with a text cursor.</div>
<div class="wait-cursor">Please wait, this operation is in progress.</div>
<div class="help-cursor">Hover over me for help information.</div>

</body>
</html>