CSS cursor属性

在本文中，我们将介绍CSS中的cursor属性。cursor属性定义了鼠标指针在一个元素上的显示方式。换句话说，它可以改变鼠标光标的形状，从而完成一些交互效果。

阅读更多：CSS 教程

cursor的语法

cursor属性的语法很简单：

selector {  cursor: value; }

value可以是下面这些值之一：

• auto，默认值。浏览器自动计算鼠标指针的样式。
• pointer ，鼠标指针变成手指指针，表示可以点击链接。
• crosshair，鼠标指针变成十字线形状，表示可以选中一个区域。
• move，鼠标指针变成一个小手带上下箭头，表示该区域可以移动。
• text，鼠标指针变成光标，表示该区域可以输入文字。
• wait，鼠标指针变成等待样式。
• help，鼠标指针变成帮助样式。
• none，鼠标指针消失。

鼠标指针的形状

除了上述预定义的值之外，cursor属性还可以接受自定义的值。这些自定义值可以是指定的图像或者是系统支持的光标类型。指定图像的方式是要使用url()函数。

举个例子，假设我们想将鼠标指针设置成一只可爱的小兔子：

.custom {
    cursor: url('rabbit.png'),auto;
}

这里我们使用的是一个PNG格式的图像作为光标，因此url内的参数是一个文件路径。逗号后面的auto是在图像未加载时展示的默认指针样式。

此外，在不同的平台上，也存在着多种预定义光标类型。比如，Windows平台上支持9种不同类型的光标，MacOS X则支持一些增强的光标类型。指定这些类型的写法如下：

.cursor {
    cursor: e-resize; /* 右边界拖拽 */
    cursor: w-resize; /* 左边界拖拽 */
    cursor: text; /* 文本输入 */
    cursor: wait; /* 等待 */
    cursor: pointer; /* 指向链接 */
    cursor: help; /* 帮助 */
}

cursor属性和链接

cursor属性最常见的用途之一是为链接设置指针。需要注意的是，当鼠标指向链接时，大多数浏览器默认会将鼠标指针设置为手指指针（pointer）。此时，应用其它指针样式是没有必要的。如果您还希望在手指指针之外应用其它指针样式，则可以为其它元素设置cursor属性。

a:hover {
    cursor: move; /* 鼠标指向链接时变成移动图标 */
}

总结

cursor属性可以定义鼠标指针的形状，它对于改变用户的交互体验非常重要。在实际使用中，大多数情况下，我们只需要使用CSS中预定义的样式即可。而在某些情况下，自定义的样式对于拥有独特风格的网站非常有用。需要注意的是，在为链接设置指针时，应该考虑到大多数浏览器默认会将鼠标指针设置为手指指针，此时无需再设定其他指针样式。