层叠样式表/光标

光标

CSS 允许在需要特定上下文的时指定光标。不需要使用:hover 选择器。

cursor: cursor-name;

通用光标
auto	根据当前上下文自动确定光标。鼠标悬停在文本上得到一个 I 形光标，悬停在链接上得到一个指针，等等。标准行为。
default	默认光标，通常是一个箭头。
none	您不应该看到光标。
链接和状态光标
context-menu	指示存在上下文菜单或光标处于上下文菜单模式的光标。通常是带有小型上下文菜单表示的箭头光标。
help	帮助光标，通常是问号。
pointer	伸出食指的手掌。
progress	指示后台正在进行工作的光标，用户仍然能够与控件进行交互。通常是带有时钟或旋转动画的箭头光标。
wait	某种手表或时钟。
选择光标
cell	用于在表格、电子表格中选择一个或多个单元格。通常是带有中心的点的粗体加号。
crosshair	用于精确选择的十字线。
text	I 形光标
vertical-text	用于垂直文本的水平 I 形光标
拖放光标
alias	指示别名、符号链接或其他文件/数据间接引用的光标。通常是一个弯曲的箭头。
copy	指示可复制拖动项目的的光标。通常是带有 + 的箭头光标。
move	移动光标，通常是带有箭头端点的 +。
no-drop
not-allowed	通常是一个带斜线的圆圈
调整大小和滚动光标
e-resize	向东或向右调整大小。
ew-resize	东西方向或水平调整大小。
ne-resize	东北方向或右上角调整大小。
nesw-resize	东北-西南方向或对角线调整大小。
nw-resize	西北方向或左上角调整大小。
nwse-resize	西北-东南方向或对角线调整大小。
n-resize	向北或向上调整大小。
ns-resize	南北方向或垂直调整大小。
se-resize	东南方向或右下角调整大小。
sw-resize
s-resize	向南或向下调整大小。
w-resize	向西或向左调整大小。
col-resize	列调整大小。
row-resize	行调整大小。
all-scroll	指示任何方向滚动的光标。通常是四个主要方向的箭头。
供应商光标
-vendor-grab	指示准备抓取或拾取项目的的光标。通常是空手。
-vendor-grabbing	指示已经抓取或正在握住/携带项目的的光标。通常是拳头。
-vendor-zoom-in	指示放大操作的光标，通常是带有⊕的放大镜。
-vendor-zoom-out	指示缩小操作的光标，通常是带有⊖的放大镜。

自定义光标

可以使用 url() 函数提供自定义光标，并可以选择为热点提供坐标，如果文件没有指定坐标的话。

cursor: url('http://example.com/mypointer.cur'), pointer;

或

cursor: url('http://example.com/mypointer.cur'), url('http://example.com/mypointer.png') 2 2, pointer;

在此示例中，我们可以看到有一个第二个值，这是某些浏览器在接受自定义光标之前所需的回退值。您可以使用 PNG、GIF、SVG 或 .cur 文件作为光标，.ani 文件仅在 Internet Explorer 中有效。

这是一个 .gif 示例

尝试运行代码片段，您应该看到此光标。

<div style="cursor: url('http://upload.wikimedia.org/wikipedia/commons/d/d9/Cursor_forgetful.gif') 17 7, pointer; border: 1px solid;">
GIF cursor test.
</div>

GIF 光标测试