HTML | DOM 样式光标属性

在 HTML | DOM 中，光标可以是不同的形状。通过定义不同的 CSS 样式，我们可以更改光标的外观，从而增强用户的交互体验。以下是一些常用的 CSS 光标样式属性。

cursor 属性

cursor 属性定义鼠标指针悬停在元素上的形状。CSS cursor 属性接受以下值：

• auto - 默认值。浏览器会设置指针
• default - 浏览器会设置默认的指针（通常是箭头）
• pointer - 当鼠标指针悬停在元素上时，显示一个指示链接的指针
• move - 当鼠标指针悬停在元素上时，显示一个指示移动的指针
• text - 当鼠标指针悬停在元素上时，显示一个指示文本选择的指针
• not-allowed - 当鼠标指针悬停在元素上时，显示一个指示不允许操作的指针
• crosshair - 当鼠标指针悬停在元素上时，显示一个指示用于对某些区域进行精确选择的十字线
• wait - 当鼠标指针悬停在元素上时，显示一个指示等待的指针
• help - 当鼠标指针悬停在元素上时，显示一个指示帮助的指针

以下是示例代码：

/* 设置 a 标签的指针形状为手指形状 */
a {
  cursor: pointer;
}

/* 设置表单元素的指针形状为文本选择形状 */
input[type="submit"],
input[type="text"],
textarea {
  cursor: text;
}

/* 设置禁用的按钮的指针形状为不可用形状 */
button:disabled {
  cursor: not-allowed;
}

CSS 自定义光标

除了默认的光标样式之外，CSS 还允许您自定义光标的形状，以及使用自定义的图像作为光标。

URL 值

使用 url 值指定自定义光标的图像 URL。以下是示例代码：

/* 使用自定义图像作为指针 */
body {
  cursor: url("custom-cursor.png"), auto;
}

自定义形状

使用 none 值以及 ::before 和 ::after 伪元素，可以创建自定义的光标形状。以下是示例代码：

/* 创建自定义的十字线形状 */
.custom-cursor::before,
.custom-cursor::after {
  content: "";
  position: absolute;
  background-color: #000;
}

/* 水平线 */
.custom-cursor::before {
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
}

/* 垂直线 */
.custom-cursor::after {
  height: 100%;
  width: 2px;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}

/* 设置自定义光标形状 */
body {
  cursor: none;
}

/* 为元素添加自定义光标 */
.custom-cursor {
  cursor: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上是关于 HTML | DOM 样式光标属性的介绍，希望能够帮助到您。