CSS cursor属性决定鼠标光标悬停在应用此属性的元素上时的外观。此属性仅适用于具有鼠标和光标功能的环境。其主要目的是通过直观地表示某些功能来提高可用性。
属性值
光标属性可以具有以下值:
<url>:（可选）您可以灵活地使用一系列以逗号分隔的 url() 值，每个 url() 都指向一个图像文件。
<x> <y>:（可选）您可以选择指定定义光标热点的 x 和 y 坐标，并指定光标在光标图像中指向的确切位置。
<keyword>:需要一个关键字值来指定要使用的光标类型或在无法加载任何指定符号时要使用的备用光标。
下表列出了可用的关键字。
| 类别 | 值 | 示例 | 描述 |
|---|---|---|---|
| 常规 | auto |  | 显示的光标由用户代理根据当前上下文确定。 这是默认值 浏览器用来定义光标的属性。 |
default | | 默认光标根据平台的不同而有所不同，通常显示为箭头。 | |
none | 没有显示光标。 | ||
| 链接和状态 | context-menu |  | 显示的光标是上下文菜单光标，表明可以访问上下文菜单。 |
help |  | 显示的光标为帮助光标，显示可获取帮助的信息。 | |
pointer |  | 显示的光标为指针光标，显示光标作为指向超链接的指示符。 | |
progress |  | 显示的光标是进度光标，显示程序正在执行后台任务，允许用户保持与界面的交互，而不必等待其完成。 | |
wait |  | 显示的光标是光标，当前程序被占用，用户无法与界面交互，这种状态有时用沙漏或手表的图像来表示。 | |
| 拖放 | alias |  | 显示的光标为别名光标，表明需要生成别名或快捷方式。 |
copy |  | 显示的光标是复制光标，表明需要创建某个内容的副本。 | |
move |  | 显示的光标为move-cursor，表示可以移动某些内容。 | |
no-drop |  | 显示的光标是不可放置光标，表明可能无法将项目放置在当前位置。 | |
not-allowed |  | 显示的光标是不允许的光标，表明请求的操作不会被执行。 | |
grab |  | 显示的光标为抓取光标，表示可以抓取元素，并且可以拖动来重新定位。 | |
grabbing |  | 显示的光标为抓取光标，表示正在握住或拉动某物以方便其移动。 | |
| 选择 | cell |  | 显示的光标是单元格光标，显示选择表格单元格或一组单元格的选项。 |
crosshair |  | 显示的光标为十字光标，通常用于指示位图中元素的选择。 | |
text |  | 显示的光标为文本光标，表明您可以选择通常由I形光标指示的文本。 | |
vertical-text |  | 显示的光标为竖排文本光标，表明您可以选择竖排文本，通常用侧对齐的 I 条表示。 | |
| 缩放 | zoom-in |  | 显示的光标是放大的，表示可以通过缩放来放大对象。 |
zoom-out |  | 显示的光标是缩小的，表示可以通过缩放来缩小对象。 | |
| 调整大小和滚动 | all-scroll |  | 显示的光标均为滚动光标，可以向任意方向滚动，也称为平移。 |
col-resize |  | 显示的光标是列调整大小光标，显示元素或列可能会进行水平调整大小，通常表示为指向左和右的箭头，由竖线分隔。 | |
row-resize |  | 显示的光标是行调整大小光标，显示元素或行可能会进行垂直调整大小，通常由向上和向下的箭头表示，并以水平条分隔。 | |
n-resize |  | 显示的光标为北向调整大小光标，表示北侧可以移动或平移。 | |
e-resize |  | 显示的光标为东向调整大小光标，表示东侧可以移动或平移。 | |
s-resize |  | 显示的光标为南向调整大小光标，表示南边可以移动或平移。 | |
w-resize |  | 显示的光标为西向调整大小光标，表明西侧可以移动或平移。 | |
ne-resize |  | 显示的光标为东北调整大小光标，显示双向调整大小的光标。 | |
nw-resize |  | 显示的光标为西北调整大小光标，显示双向调整大小的光标。 | |
se-resize |  | 显示的光标为东南调整大小光标，显示双向调整大小的光标。 | |
sw-resize |  | 显示的光标为西南调整大小光标，显示双向调整大小的光标。 | |
ew-size |  | 显示的光标为东西向调整大小光标，显示双向调整大小的光标。 | |
ns-resize |  | 显示的光标为南北调整大小光标，显示双向调整大小的光标。 | |
nesw-resize |  | 显示的光标为东北西南调整大小光标，显示双向调整大小的光标。 | |
nwse-resize |  | 显示的光标为西北东南调整大小光标，显示双向调整大小的光标。 |
适用范围
所有 HTML 元素。
DOM 语法
object.style.cursor = "cell"; 一些注意点:
光标属性是以值的组合为特征，其范围可以从零到多个 <url>，以逗号分隔，后跟强制关键字（下节表格中列出的所有关键字）值。
每个 <url> 应该指向一个图像文件。
浏览器将尝试加载指定的第一个图像，如果不能加载，则回退到下一个，然后回退到如果无法加载图像（或者未指定任何图像），则为关键字值。
CSS cursor: 关键字值
这里是显示的示例css中各种类型的光标 -
<html>
<head>
<title>所有 CSS 光标</title>
<style>
.demo-cursor {
display: inline-block;
background-color: LightYellow;
width: 100px;
height: 100px;
margin: 10px;
border: 3px solid #ccc;
cursor: pointer;
}
.default { cursor: default; }
.auto { cursor: auto; }
.crosshair { cursor: crosshair; }
.pointer { cursor: pointer; }
.move { cursor: move; }
.text { cursor: text; }
.wait { cursor: wait; }
.help { cursor: help; }
.not-allowed { cursor: not-allowed; }
.progress { cursor: progress; }
.alias { cursor: alias; }
.copy { cursor: copy; }
.no-drop { cursor: no-drop; }
.e-resize { cursor: e-resize; }
.n-resize { cursor: n-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.s-resize { cursor: s-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.w-resize { cursor: w-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; }
.zoom-in { cursor: zoom-in; }
.zoom-out { cursor: zoom-out; }
.grab { cursor: grab; }
.grabbing { cursor: grabbing; }
</style>
</head>
<body>
<h1>所有 CSS 光标，将鼠标悬停在块上。</h1>
<div class="demo-cursor auto"><h3 style="text-align:center;">Auto</h3></div>
<div class="demo-cursor default"><h3 style="text-align:center;">Default</h3></div>
<div class="demo-cursor crosshair"><h3 style="text-align:center;">Crosshair</h3></div>
<div class="demo-cursor pointer"><h3 style="text-align:center;">Pointer</h3></div>
<div class="demo-cursor move"><h3 style="text-align:center;">Move</h3></div>
<div class="demo-cursor text"><h3 style="text-align:center;">Text</h3></div>
<div class="demo-cursor wait"><h3 style="text-align:center;">Wait</h3></div>
<div class="demo-cursor help"><h3 style="text-align:center;">Help</h3></div>
<div class="demo-cursor not-allowed"><h3 style="text-align:center;">Not-allowed</h3></div>
<div class="demo-cursor progress"><h3 style="text-align:center;">Progress</h3></div>
<div class="demo-cursor alias"><h3 style="text-align:center;">Alias</h3></div>
<div class="demo-cursor copy"><h3 style="text-align:center;">Copy</h3></div>
<div class="demo-cursor no-drop"><h3 style="text-align:center;">No-drop</h3></div>
<div class="demo-cursor e-resize"><h3 style="text-align:center;">e-resize</h3></div>
<div class="demo-cursor n-resize"><h3 style="text-align:center;">n-resize</h3></div>
<div class="demo-cursor ne-resize"><h3 style="text-align:center;">ne-resize</h3></div>
<div class="demo-cursor nw-resize"><h3 style="text-align:center;">nw-resize</h3></div>
<div class="demo-cursor s-resize"><h3 style="text-align:center;">s-resize</h3></div>
<div class="demo-cursor se-resize"><h3 style="text-align:center;">se-resize</h3></div>
<div class="demo-cursor sw-resize"><h3 style="text-align:center;">sw-resize</h3></div>
<div class="demo-cursor w-resize"><h3 style="text-align:center;">w-resize</h3></div>
<div class="demo-cursor ew-resize"><h3 style="text-align:center;">ew-resize</h3></div>
<div class="demo-cursor ns-resize"><h3 style="text-align:center;">ns-resize</h3></div>
<div class="demo-cursor nesw-resize"><h3 style="text-align:center;">nesw-resize</h3></div>
<div class="demo-cursor nwse-resize"><h3 style="text-align:center;">nwse-resize</h3></div>
<div class="demo-cursor col-resize"><h3 style="text-align:center;">col-resize</h3></div>
<div class="demo-cursor row-resize"><h3 style="text-align:center;">row-resize</h3></div>
<div class="demo-cursor zoom-in"><h3 style="text-align:center;">Zoom-in</h3></div>
<div class="demo-cursor zoom-out"><h3 style="text-align:center;">Zoom-out</h3></div>
<div class="demo-cursor grab"><h3 style="text-align:center;">Grab</h3></div>
<div class="demo-cursor grabbing"><h3 style="text-align:center;">Grabbing</h3></div>
</body>
</html> CSS cursor: <url> 值
这里是使用图像作为光标值的示例 -
<html>
<head>
<title>All CSS Cursors</title>
<style>
.demo-cursor {
display: inline-block;
background-color: LightYellow;
width: 100px;
height: 100px;
margin: 10px;
border: 3px solid #ccc;
cursor: url(images/try-it.jpg), pointer;
}
</style>
</head>
<body>
<h1>图像 CSS 光标，将鼠标悬停在块上。</h1>
<div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
</div>
</body>
</html> CSS cursor: <url> 多个值
以下示例显示使用多个图像（逗号分隔）作为光标值−
<html>
<head>
<title>All CSS Cursors</title>
<style>
.demo-cursor {
display: inline-block;
background-color: LightYellow;
width: 100px;
height: 100px;
margin: 10px;
border: 3px solid #ccc;
cursor: url(/css/images/try-it.jpg),url(/css/images/cursor-text1.png), crosshair;
}
</style>
</head>
<body>
<h1>图像 CSS 光标，将鼠标悬停在块上。</h1>
<div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
</div>
</body>
</html> 尝试将第一个图像文件名重命名为 try-it-1.jpg (这样就找不到图像）然后执行程序。我们看到回退效果，即当第一个图像未找到源时，控制第二个图像的回退并用作光标。