cursor属性如何改变光标的形状？（图文详解）

首先我们来看看cursor属性是如何改变光标形状的。

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、cursor属性适用于所有元素；

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

3、并非所有浏览器都支持cursor属性的所有属性值，且所有属性值在所有浏览器和操作系统中显示的效果不一定相同。

下面我们来看看cursor属性的这些属性值可以设置怎样的光标形状。

图像游标（自定义游标）

<URI>：

一个或多个逗号分隔的url()用来指向要用作光标的图像。用户代理从第一个中检索游标url()。如果用户代理无法处理游标列表的第一个游标，则必须尝试处理游标列表等。如果用户代理无法处理任何提供的图像（请参阅浏览器支持），则必须使用游标关键字。列表的末尾。可选的<x>和<y>坐标标识图像中指针位置（即热点）的确切位置。

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

<x> <y>：

使用小于32 的无单位数字，不允许使用负值。这些值指定光标热点的坐标。第一个数字是x坐标，第二个数字是y坐标。

例：

cursor：url（some-cursor .png）2 15，pointer ;

下面我们来看看图像游标的示例：

css代码：

.custom {   cursor: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.png), url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/cursor/clock-cursor.cur), pointer; }

通用光标（箭头状）

default：默认光标，通常箭头。

auto：根据当前上下文确定要显示的光标。例如，text当文本悬停时显示。

none：不为元素呈现光标显示光标。

.auto {   cursor: auto; }  .default {   cursor: default; }  .none {   cursor: none; }

链接和状态游标

help：此光标通常呈现为问号或气球。它表示光标下的对象可以使用帮助。

pointer：光标是指示链接的指针。

progress：进度指标。表示程序正在执行某些处理，但不同之处wait在于用户仍可以与程序进行交互。通常呈现为旋转的沙滩球，或带有手表或沙漏的箭头。

wait：此光标通常呈现为手表或沙漏。它表示程序正忙，用户应该等待。

例：

.context-menu {   cursor: context-menu; }  .help {   cursor: help; }  .pointer {   cursor: pointer; }  .progress {   cursor: progress; }  .wait {   cursor: wait; }

选择光标

cell：此光标通常呈现为粗加号，中间有一个点。它表示可以选择一个单元或一组单元。

crosshair：简单的十字准线（例如，类似于“+”符号的短线段）。通常用于表示二维位图选择模式。

vertical-text：该光标通常呈现为水平工字梁。它表示可以选择的垂直文本。

例：

.cell {   cursor: cell; }  .crosshair {   cursor: crosshair; }  .text {   cursor: text; }  .vertical-text {   cursor: vertical-text; }

拖放光标

alias：此光标通常呈现为箭头，旁边有一个小弯曲箭头。它表示要创建的某个别名/快捷方式。

copy：此光标通常呈现为箭头，旁边有一个小加号。它表明要复制的东西。

move：表示要移动的东西。渲染此光标的方式取决于浏览器，如上面的描述中所述。它通常呈现为四向箭头或类似手的形状。

no-drop：此光标通常呈现为手形或指针，带有一个小圆圈，并带有一条直线。它表示无法在当前光标位置删除拖动的项目。

not-allowed：此光标通常呈现为一个圆圈，并带有一条直线。它表示不会执行请求的操作。

例：

.alias {   cursor: alias; }  .copy {   cursor: copy; }  .move {   cursor: move; }  .no-drop {   cursor: no-drop; }  .not-allowed {   cursor: not-allowed; }

缩放光标：

zoom-in（放大）、zoom-out（缩小）：

表示某些内容可以放大或缩小，并且通常在玻璃中心呈现为带有“+”或“ - ”的放大镜。

例：

.zoom-in {   cursor: -webkit-zoom-in;   cursor: zoom-in; }  .zoom-out {   cursor: -webkit-zoom-out;   cursor: zoom-out; }

抓取光标

grab 、grabbing：

表示可以抓取元素（拖动以移动）。grab是一只开放的手“准备拖动”，并且dragging是一只看起来像抓住东西的“闭合”手。

例：

.grab {   cursor: -webkit-grab;   cursor: grab; }  .grabbing {   cursor: -webkit-grabbing;   cursor: grabbing; }

缩放和滚动游标

例：

.n-resize {   cursor: n-resize; }  .ne-resize {   cursor: ne-resize; }  .e-resize {   cursor: e-resize; }  .se-resize {   cursor: se-resize; }  .s-resize {   cursor: s-resize; }  .sw-resize {   cursor: sw-resize; }  .w-resize {   cursor: w-resize; }  .nw-resize {   cursor: nw-resize; }  .se-resize {   cursor: se-resize; }  .ew-resize {   cursor: ew-resize; }  .ns-resize {   cursor: ns-resize; }  .nesw-resize {   cursor: nesw-resize; }  .nwse-resize {   cursor: nwse-resize; }  .col-resize {   cursor: col-resize; }  .row-resize {   cursor: row-resize; }  .all-scroll {   cursor: all-scroll; }

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

以上就是cursor属性如何改变光标的形状？（图文详解）的详细内容，更多内容请关注技术你好其它相关文章！