CSS Cursor Pointer (指针光标)

什么是 CSS 中的光标？

我们每天都在使用自定义光标。这种交互是通过使用修改后的光标实现的，例如当你将鼠标悬停在按钮上时，指针光标会变成一只手；或者当你悬停在文本上时，光标会变成文本光标。

然而，光标也可以用来为我们的用户提供各种其他创造性的机会。

在开始开发我们自己的自定义光标之前，我们应该知道 CSS 已经为各种常见操作提供了默认光标。

这些光标在你悬停的精确位置提供了操作选项。例如，光标可以指示你应该点击链接、拖放元素、放大和缩小对象等等。

使用 CSS `cursor` 属性来描述你想要的光标类型。

CSS Cursor 属性

我们可以使用 CSS `cursor` 属性来指定应向用户显示的光标类型。

这个功能的一个有用应用是在表单上使用图片作为提交按钮。默认情况下，当光标悬停在链接上时，会出现一只手而不是指针。但是，表单的提交按钮不会使其改变形状。当有人将鼠标悬停在作为提交按钮的图片上时，这可以作为一个视觉提示，表明该图片是可点击的。

此属性由零个或多个以逗号分隔的 <url> 值指定，后面跟着一个必需的关键字值，每个 <url> 将指向一个图像文件。

语法

属性值

• Auto: 此属性的默认设置是放置光标。
• Alias: 此属性用于显示与创建相关的光标指示器。
• All-scroll: 此属性中的光标表示可以滚动。
• Cell: 此属性中的光标表示当前已选择一个单元格或一组单元格。
• Context-menu: 此属性中的光标表示存在上下文菜单。
• Col-resize: 当光标在此属性的列上时，表示可以水平调整列的大小。
• Copy: 此属性中的光标表示需要复制某些内容。
• Crosshair: 此属性中光标显示为十字准线。
• Default: 默认光标。
• E-resize: 此属性中的光标表示应移动框的右边缘。
• Ew-resize: 此属性中的光标表示一个双向调整大小的光标。
• Help: 此属性中，光标显示有帮助信息可用。
• Move: 此属性中的指针表示需要移动某些内容
• n-resize: 使用 n-resize 属性时，指针表示应移动框的上边界。
• Ne-resize: 使用此属性，光标表示应将框的边缘向右上移动。
• New-resize: 此属性表示双向调整大小光标。
• Ns-resize: ns-resize 属性表示一个双向调整大小的光标。
• Nw-resize: 此属性中的光标表示框的上下边缘将向左上移动。
• Nose-resize: 此属性表示双向调整大小光标。
• No-drop: 此属性中的光标表示被拖动的对象不能在此位置放下。
• None: 根据此属性，不为该元素显示光标。
• Not-allowed: 此属性中的光标表示请求的操作将不会被执行。
• Pointer: 此属性中的光标作为指针并显示链接进度。
• Progress: 此属性中的光标表示程序正忙。
• Row-resize: 光标表示此功能允许垂直调整行的大小。
• S-resize: 使用此属性时，指针表示应向下移动框的下边界。
• Se-resize: 此属性中的光标表示应将框的边缘向右下移动。
• Sw-resize: 此属性中的光标表示应移动框的左下边缘。
• Text: 此属性中的光标表示可以选择的文本。
• URL: 此属性包含一个以逗号分隔的自定义光标 URL 列表，并在列表末尾带有一个通用光标。
• Vertical-text: 此属性中的光标表示可能的垂直文本选择。
• W-resize: 使用此属性时，指针表示应移动框的左边缘。

示例

这个例子展示了如何利用 `cursor` 属性。由于 `cursor` 属性的值设置为 `wait`，表示程序正忙。

输出

当用户将鼠标悬停在列表项上时，CSS 如何使光标变成手形？

当用户将鼠标悬停在项目列表上时，可以使用 CSS 属性创建光标。首先使用 HTML 的 <ul> 和 <li> 标签构建一个对象列表，然后利用 CSS 属性：使用 `hover` 伪类将 `cursor` 设置为 `grab`，使光标在悬停于列表对象上时变为手形。

语法

示例

输出

我们如何使用 CSS 改变光标的颜色？

在这里，我们将利用 CSS 来改变输入字段中光标的颜色。我们将使用 `caret-color` 属性来改变光标的颜色。这个属性可以改变文本区域、输入字段和其他可编辑位置的光标颜色。

语法

参数

• Auto: 该值为默认设置。它利用了网页浏览器的最新颜色。
• Color: 它用于指定插入符的颜色值。可以使用任何值（RGB、十六进制、命名颜色等）。

示例

举个例子，让我们使用 `caret-color` 属性来设置输入字段的光标颜色。

输出

我们如何使用 CSS 在浏览器中更改光标样式？

在 CSS 中，`cursor` 属性用于指定当鼠标悬停在元素上时将显示的鼠标光标类型。浏览器对光标的默认设置是指针。此外，如果需要，也可以使用 CSS 进行自定义。`cursor` 属性的默认设置是 'auto'。另外，向 `cursor` 属性添加值 `auto` 是可选的，因为它默认已经是 `auto`。

语法

属性值：它描述了 `cursor` 属性的值。

示例：在此示例中，为了将光标显示为十字准线，我们将 `cursor` 属性值设置为 'cursor: crosshair'。

输出

我们可以使用 CSS `cursor` 属性来指定应向用户显示的光标类型。此功能的一个有用应用是在表单上使用图片作为提交按钮。默认情况下，当光标悬停在链接上方时，会出现一只手而不是指针。