前端cursor怎么使用

### 使用 CSS `cursor` 属性

#### HTML 中内联样式设置 `cursor`

可以在HTML元素的`style`属性中直接设置`cursor`属性，如下所示：

<p style="cursor:pointer;">这是一个带有指针光标的段落</p>

此方法适用于单个元素快速应用特定的光标效果[^1]。

#### CSS 样式表中的 `cursor` 设置

更常见的是，在外部或内部CSS文件里定义类选择器、ID选择器或者其他复杂的选择符来指定鼠标的外观。例如：

/* 定义所有 div 的鼠标指针为手型 */
div {
    cursor: pointer;
}

这种方式有助于保持代码整洁并易于维护，特别是当多个页面共享相同的样式时[^2]。

#### JavaScript 动态修改 `cursor`

通过JavaScript也可以动态更改元素上的`cursor`值。这通常用于响应用户的交互行为，如点击按钮后改变某个区域内的光标形式：

document.getElementById('myElement').style.cursor = "crosshair";

这种方法提供了灵活性，可以根据应用程序的状态实时调整用户体验[^3]。

#### 预定义与自定义光标

除了标准预设外（如`pointer`, `default`, `text`），还可以加载自己的图片作为特殊情况下使用的光标图标。对于复杂的Web应用来说，这种功能增加了个性化体验的可能性[^4]。