CSS cursor 属性 — 鼠标指针样式效果

让我给你讲一下 CSS cursor 属性的完整攻略：

什么是 CSS cursor 属性？

CSS cursor 属性用于设置鼠标在特定元素上的图标形状。通过改变鼠标指针的样式，可以增强用户和网页交互的体验，提高网站的可用性。

CSS cursor 属性语法

CSS cursor 属性的基本语法如下：

selector {
  cursor: value;
}

其中，selector 表示要设置鼠标指针样式的元素，value 表示指针的样式。

CSS cursor 属性的可选值

CSS cursor 属性包含多种可选值，可以根据不同的需求设置不同的鼠标指针样式。常用的可选值包括：

• auto：浏览器自动识别；

• default：默认指针，通常是个箭头；

• none：不显示鼠标指针；

• context-menu：表示对象为上下文菜单；

• help：帮助指针；

• pointer：链接指针，通常是个小手；

• progress：忙碌指针，表示程序正在处理；

• wait：等待指针，表示程序正在等待；

• cell：表示对象为可编辑的单元格；

• crosshair：十字准心指针；

• text：文字指针，表示光标在文本上；

• vertical-text：垂直文字指针；

• alias：链表指针，表示该对象是个链接，可被拖曳；

• copy：复制指针，表示可以拖动以复制该对象；

• move：移动指针，表示可以拖动对象；

• no-drop：拒绝指针，表示对象不允许拖动；

• not-allowed：禁止指针，表示操作不允许；

• e-resize：左右拖拽指针，表示可以水平地缩放该对象；

• n-resize：上下拖拽指针，表示可以垂直地缩放该对象；

• ne-resize：右上角拖拽指针，表示可以按对角线缩放该对象；

• nw-resize：左上角拖拽指针，表示可以按对角线缩放该对象；

• se-resize：右下角拖拽指针，表示可以按对角线缩放该对象；

• sw-resize：左下角拖拽指针，表示可以按对角线缩放该对象；

• w-resize：水平拖拽指针，表示可以水平调整该对象的宽度；

• s-resize：垂直拖拽指针，表示可以垂直调整该对象的高度。

CSS cursor 属性示例

接下来，让我们来看两个 CSS cursor 属性的示例：

示例 1：改变图片链接的鼠标指针样式

在网页中，通常会将一些图片设置成链接，让用户可以点击进入到相应的页面。这时，我们可以通过 CSS cursor 属性来改变鼠标指针样式，让用户更清楚地知道这是一个可点击的链接。

<a href="https://www.example.com">
  <img src="path/to/image.jpg" alt="example">
</a>

a {
  cursor: pointer;
}

在上面的示例中，我们将 <a> 标签的光标样式设置为 pointer，也就是小手的图标样式。这样，在用户将光标放在图片链接上时，就会直接显示成小手，告诉用户这是一个可以点击的链接。

示例 2：改变表单元素的鼠标指针样式

在表单中，有时候需要在表单元素上放置一些图标或其他样式来提示用户需要输入何种类型的数据。这时，我们可以通过 CSS cursor 属性来改变鼠标指针的样式，让用户更容易地知道该输入框需要输入什么类型的数据。

<input type="text" placeholder="请输入您的邮箱地址">

input[type="text"] {
  cursor: text;
}

在上面的示例中，我们将 type="text" 的 <input> 标签的光标样式设置为 text，也就是文字光标的图标样式。这样，在用户将光标放在输入框上时，就会直接显示成文字光标，告诉用户这是一个可以输入文本的输入框。

结语

通过设置 CSS cursor 属性，我们可以轻松地定制不同的鼠标指针样式，让用户更清楚地知道该元素的作用及操作方式，提高网站的可用性和用户体验。