CSS Cursor
CSS Cursor
CSS Cursor用于将鼠标指针放在元素上时定义鼠标光标的类型。它允许我们指定显示给用户的鼠标类型，当用户将鼠标悬停在链接上时，默认情况下，鼠标会从指针变成手形。
让我们了解光标的属性值。
| 值 | 用法 |
| alias | 别名光标，表示当前元素可以创建别名或快捷方式 |
| auto | 这是浏览器用来设置光标的默认属性。 |
| all-scroll | 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。 |
| col-resize | 表示光标所在列可以水平调整大小。 |
| cell | 光标可以选择一个单元格或单元格集合。 |
| context-menu | 上下文菜单，兼容性不佳，汽油桶形状 |
| default | 默认光标（通常是一个箭头） |
| copy | 复制光标，表示当前元素可以复制。 |
| crosshair | 十字光标，它比较适合取色工具的场景中，平时很少用到。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ew-resize | 它代表东西方向，并指示双向调整大小光标。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| move | 移动光标，表示当前元素是可移动的。 |
| help | 它以问号或气球的形式表示可以提供帮助。 |
| None | 这是让光标隐藏不见。 |
| No-drop | 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（南）。 |
| Row-resize | 用于指示可以垂直调整行的大小。 |
| Se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| Sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| Wait | 没用的光标，有个沙漏的样子 |
| url | 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| Zoom-in | 它用于表示可以放大某些内容。 |
| Zoom-out | 用于表示可以缩小某些内容。 |
使用游标属性的上述值的示例如下：
示例
<html>
<head>
</head>
<body>
<p>将鼠标移到以下词语上，查看光标形状。</p>
<div style="cursor:alias">alias的光标形状。</div>
<div style="cursor:auto">auto的光标形状。</div>
<div style="cursor:all-scroll">all-scroll的光标形状。</div>
<div style="cursor:col-resize">col-resize的光标形状。</div>
<div style="cursor:crosshair">Crosshair的光标形状。</div>
<div style="cursor:default">Default的光标形状。</div>
<div style="cursor:copy">copy的光标形状。</div>
<div style="cursor:pointer">Pointer的光标形状。</div>
<div style="cursor:move">Move的光标形状。</div>
<div style="cursor:e-resize">e-resize的光标形状。</div>
<div style="cursor:ew-resize">ew-resize的光标形状。</div>
<div style="cursor:ne-resize">ne-resize的光标形状。</div>
<div style="cursor:nw-resize">nw-resize的光标形状。</div>
<div style="cursor:n-resize">n-resize的光标形状。</div>
<div style="cursor:se-resize">se-resize的光标形状。</div>
<div style="cursor:sw-resize">sw-resize的光标形状。</div>
<div style="cursor:s-resize">s-resize的光标形状。</div>
<div style="cursor:w-resize">w-resize的光标形状。</div>
<div style="cursor:text">text的光标形状。</div>
<div style="cursor:wait">wait的光标形状。</div>
<div style="cursor:help">help的光标形状。</div>
<div style="cursor:progress">Progress的光标形状。</div>
<div style="cursor:no-drop">no-drop的光标形状。</div>
<div style="cursor:not-allowed">not-allowed的光标形状。</div>
<div style="cursor:vertical-text">vertical-text的光标形状。</div>
<div style="cursor:zoom-in">Zoom-in的光标形状。</div>
<div style="cursor:zoom-out">Zoom-out的光标形状。</div>
</body>
</html>
输出：
将鼠标移到以下词语上，查看光标形状。
alias的光标形状。
auto的光标形状。
all-scroll的光标形状。
col-resize的光标形状。
Crosshair的光标形状。
Default的光标形状。
copy的光标形状。
Pointer的光标形状。
Move的光标形状。
e-resize的光标形状。
ew-resize的光标形状。
ne-resize的光标形状。
nw-resize的光标形状。
n-resize的光标形状。
se-resize的光标形状。
sw-resize的光标形状。
s-resize的光标形状。
w-resize的光标形状。
text的光标形状。
wait的光标形状。
help的光标形状。
Progress的光标形状。
no-drop的光标形状。
not-allowed的光标形状。
vertical-text的光标形状。
Zoom-in的光标形状。
Zoom-out的光标形状。