css的cursor属性怎么用

这篇文章给大家分享的是有关css的cursor属性怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

首先我们来了解一下cursor属性是什么？有什么作用？

cursor属性是css中的光标属性，它指定当鼠标位于应用元素上时可以使用的鼠标光标类型，即：规定要显示的光标的类型（形状）。

我们可以通过cursor属性将光标设置为许多预定义光标类型之一，或设置为图像（如下面的示例）。

注：cursor属性仅对具有指针设备（如鼠标）的设备有效。它对触控设备没有任何影响。

cursor属性用于向用户提供视觉反馈和提示，以便在元素上传送某种功能，对于提供更好的用户体验通常是重要的。

根据浏览器和操作系统，在CSS中定义的cursor值可以呈现不同的效果。例如，某些浏览器（例如Windows 7上的Firefox）将move（通常用于表示元素可拖动）光标显示为四向箭头，而其他浏览器（例如，在Mac OS X上的Firefox）将显示手形光标。在这种情况下，如果你希望光标是一个在所有浏览器和平台上看起来完全相同的特定光标，你可能需要使用图像而不是默认的CSS关键字。

官方语法

句法：

cursor: [ [<URI> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit ;

初始：自动

适用于：所有元素

动画：没有

新的CSS3语法：

在CSS3中，已向cursor属性添加了其他值和选项，下面我们来看看：

cursor: [ [ <URI> [<x> <y>]?,]* [ 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 | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]；

说明：

1、并非所有浏览器都支持上述所有的值，并且并非所有值在所有浏览器和操作系统中看起来都相同。

2、图像光标（自定义光标）

<URI>：引用图像

一个或多个逗号分隔的url()指向要用作光标的图像。

cursor：url（例如1：.svg #linkcursor），url（例如2： .cur），auto ;

注：必须在回退列表的末尾提供 非URL标准的光标关键字。

<x> <y>：定义坐标

使用不加单位的数值，不允许使用负值；这些值指定光标热点的坐标。第一个数字是x坐标，第二个数字是y坐标。例如，以下内容：

cursor: url(some-cursor.png) 2 15, pointer;

将光标的热点设置为从左上角（0,0）开始的（2,15）像素。

如果未指定，则从文件本身（对于CUR和XBM文件）读取热点的坐标，或者将其设置为图像的左上角。

我们来看一个图像光标：

3、常用光标形状

none：定义光标不显示

通常呈现为箭头：default 、auto、context-menu

通常呈现为手型：pointer、grab、grabbing，hand

help：通常呈现为问号或气球

等待加载：progress（旋转的沙滩球，或带有手表或沙漏的箭头），wait（手表或沙漏）

表示方向或移动：
e-resize、ne-resize 、n-resize 、nw-resize 、w-resize 、 sw-resize 、s-resize 、se-resize、ew-resize 、ns-resize、nesw-resize 、nwse-resize 、col-resize、 row-resize、、all-scroll、move

表示禁止：no-drop 、not-allowed

浏览器支持

支持以下版本：

*表示必需的前缀。

感谢各位的阅读！关于css的cursor属性怎么用就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！