csscursor（Css cursor设置成光标）

## CSS `cursor` 属性详解

简介

`cursor` 属性是 CSS 中一个重要的属性，它用于设置鼠标指针在元素上悬停时的样式。通过它，我们可以改变鼠标指针的形状，使其更符合页面内容的语义和用户体验，提升交互的直观性。 这篇文章将详细介绍 `cursor` 属性的各种取值和用法。### 一、 `cursor` 属性的基本用法`cursor` 属性的语法非常简单：```css selector {cursor: cursor-value; } ```其中 `selector` 是选择器，指定要应用样式的元素；`cursor-value` 是 `cursor` 属性的取值，用于指定鼠标指针的样式。### 二、 `cursor` 属性的取值`cursor` 属性具有多种取值，可以大致分为以下几类：#### 2.1 预定义的鼠标指针样式这些是 CSS 预先定义好的鼠标指针样式，可以直接使用：

`auto`: 浏览器根据上下文自动选择鼠标指针样式。这是默认值。

`default`: 显示默认的鼠标指针样式（通常是一个箭头）。

`none`: 隐藏鼠标指针。

`context-menu`: 显示上下文菜单指针（通常是一个带有三个点的箭头）。

`help`: 显示帮助指针（通常是一个带有问号的箭头）。

`pointer`: 显示指针样式（通常是一个手形）。 常用于链接和可点击元素。

`progress`: 显示进度指针（通常是一个旋转的等待指示器）。

`wait`: 显示等待指针（通常是一个旋转的等待指示器，与 `progress` 相似）。

`cell`: 显示文本选择指针（通常是一个 I 形光标）。

`crosshair`: 显示十字准星指针。

`text`: 显示文本输入指针（通常是一个 I 形光标，与 `cell` 相似）。

`vertical-text`: 显示垂直文本指针（通常是一个竖线）。

`alias`: 显示文本编辑指针（通常是一个倾斜的箭头）。

`copy`: 显示复制指针（通常是一个箭头与两个重叠的正方形）。

`move`: 显示移动指针（通常是一个四向箭头）。

`no-drop`: 显示禁止放置指针（通常是一个带有斜线的圆圈）。

`not-allowed`: 显示禁止操作指针（通常是一个带有斜线的圆圈，与 `no-drop` 相似）。

`grab`: 显示抓取指针（通常是一个手形，手指握住）。

`grabbing`: 显示正在抓取指针（通常是一个手形，手指紧握）。#### 2.2 URL 指定的自定义鼠标指针可以使用 `url()` 函数来指定自定义的鼠标指针图像：```css selector {cursor: url('path/to/cursor.cur'), auto; } ```这将使用 `path/to/cursor.cur` 指定的游标图像。 `auto` 是一个备用值，如果浏览器不支持指定的游标图像，则会回退到默认游标。 需要注意的是，自定义游标的兼容性问题，不同浏览器支持的游标格式可能不同（例如 .cur, .png, .gif）。### 三、 使用示例以下是一些 `cursor` 属性的实际应用示例：```css /

将链接的鼠标指针改为手形

/ a {cursor: pointer; }/

将不可点击元素的鼠标指针改为禁止操作

/ .disabled {cursor: not-allowed; }/

使用自定义的鼠标指针

/ .custom-cursor {cursor: url('custom_cursor.cur'), auto; }/

在拖拽元素时更改鼠标指针

/ .draggable {cursor: move; } ```### 四、 兼容性`cursor` 属性得到了所有主流浏览器的广泛支持，但自定义游标的兼容性需要额外关注，建议测试不同浏览器下的显示效果。### 五、 总结`cursor` 属性是增强用户体验的重要 CSS 属性。通过合理地使用不同的 `cursor` 值，我们可以使网页交互更加清晰、直观和友好。 记住在使用自定义游标时要考虑浏览器兼容性。

CSS `cursor` 属性详解**简介**`cursor` 属性是 CSS 中一个重要的属性，它用于设置鼠标指针在元素上悬停时的样式。通过它，我们可以改变鼠标指针的形状，使其更符合页面内容的语义和用户体验，提升交互的直观性。 这篇文章将详细介绍 `cursor` 属性的各种取值和用法。

一、 `cursor` 属性的基本用法`cursor` 属性的语法非常简单：```css selector {cursor: cursor-value; } ```其中 `selector` 是选择器，指定要应用样式的元素；`cursor-value` 是 `cursor` 属性的取值，用于指定鼠标指针的样式。

二、 `cursor` 属性的取值`cursor` 属性具有多种取值，可以大致分为以下几类：

2.1 预定义的鼠标指针样式这些是 CSS 预先定义好的鼠标指针样式，可以直接使用：* `auto`: 浏览器根据上下文自动选择鼠标指针样式。这是默认值。 * `default`: 显示默认的鼠标指针样式（通常是一个箭头）。 * `none`: 隐藏鼠标指针。 * `context-menu`: 显示上下文菜单指针（通常是一个带有三个点的箭头）。 * `help`: 显示帮助指针（通常是一个带有问号的箭头）。 * `pointer`: 显示指针样式（通常是一个手形）。 常用于链接和可点击元素。 * `progress`: 显示进度指针（通常是一个旋转的等待指示器）。 * `wait`: 显示等待指针（通常是一个旋转的等待指示器，与 `progress` 相似）。 * `cell`: 显示文本选择指针（通常是一个 I 形光标）。 * `crosshair`: 显示十字准星指针。 * `text`: 显示文本输入指针（通常是一个 I 形光标，与 `cell` 相似）。 * `vertical-text`: 显示垂直文本指针（通常是一个竖线）。 * `alias`: 显示文本编辑指针（通常是一个倾斜的箭头）。 * `copy`: 显示复制指针（通常是一个箭头与两个重叠的正方形）。 * `move`: 显示移动指针（通常是一个四向箭头）。 * `no-drop`: 显示禁止放置指针（通常是一个带有斜线的圆圈）。 * `not-allowed`: 显示禁止操作指针（通常是一个带有斜线的圆圈，与 `no-drop` 相似）。 * `grab`: 显示抓取指针（通常是一个手形，手指握住）。 * `grabbing`: 显示正在抓取指针（通常是一个手形，手指紧握）。

2.2 URL 指定的自定义鼠标指针可以使用 `url()` 函数来指定自定义的鼠标指针图像：```css selector {cursor: url('path/to/cursor.cur'), auto; } ```这将使用 `path/to/cursor.cur` 指定的游标图像。 `auto` 是一个备用值，如果浏览器不支持指定的游标图像，则会回退到默认游标。 需要注意的是，自定义游标的兼容性问题，不同浏览器支持的游标格式可能不同（例如 .cur, .png, .gif）。

三、 使用示例以下是一些 `cursor` 属性的实际应用示例：```css /* 将链接的鼠标指针改为手形 */ a {cursor: pointer; }/* 将不可点击元素的鼠标指针改为禁止操作 */ .disabled {cursor: not-allowed; }/* 使用自定义的鼠标指针 */ .custom-cursor {cursor: url('custom_cursor.cur'), auto; }/* 在拖拽元素时更改鼠标指针 */ .draggable {cursor: move; } ```

四、 兼容性`cursor` 属性得到了所有主流浏览器的广泛支持，但自定义游标的兼容性需要额外关注，建议测试不同浏览器下的显示效果。

五、 总结`cursor` 属性是增强用户体验的重要 CSS 属性。通过合理地使用不同的 `cursor` 值，我们可以使网页交互更加清晰、直观和友好。 记住在使用自定义游标时要考虑浏览器兼容性。