CSS cursor 属性
CSS cursor属性
CSS cursor属性用于定义指针移动到元素上时的鼠标指针的形状。它接受一系列值来描述不同的鼠标指针。
语法
selector {
cursor: value;
}
可选值
| 值 | 描述 |
|---|---|
| auto | 指针的样式由浏览器决定。 |
| default | 浏览器默认的指针（通常是箭头）。 |
| none | 隐藏指针。 |
| pointer | 手形指针，表示链接。 |
| progress | 正在执行某个操作的指针（通常是一只旋转的小圆圈）。 |
| wait | 表示等待指针（通常是一只钟表或一只旋转的小圆圈）。 |
| text | 文字输入光标，表示文本可以被编辑。 |
| move | 移动指针，表示元素可以被移动。 |
| crosshair | 十字形指针，表示准备进行绘图或精确定位操作。 |
| e-resize、w-resize | 东边、西边调整大小的指针。 |
| n-resize、s-resize | 北边、南边调整大小的指针。 |
| ne-resize、sw-resize | 东北角、西南角调整大小的指针。 |
| nw-resize、se-resize | 西北角、东南角调整大小的指针。 |
| help | 帮助指针，表示元素可以获得一些帮助信息。 |
| not-allowed | 不允许符号，表示元素不能被选择。 |
| col-resize | 按列调整大小的指针。 |
| row-resize | 按行调整大小的指针。 |
示例
.example {
cursor: pointer;
}
在这个示例中，鼠标指针在移动到类名为 example 的元素上时会显示成手形指针。
注意事项
- cursor属性只能用于可视交互元素，如链接和按钮等。
- cursor属性通常不是必需的，但有时可能需要将某个元素的样式更改为不同的游标以反映其交互性质。
- 可以使用自定义游标/光标，如图片或矢量图形，使用URL()函数来指定图像文件的位置。
- 移动设备不支持大多数所定义的光标类型。
结论
CSS cursor属性提供了一种简单的方式来更改鼠标指针的外观，从而对元素交互性进行反映。它可以帮助用户更轻松地了解他们与页面上的哪些元素进行交互，同时还可以使元素变得更加易于使用。