cursor

cursor CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。

示例

/* 仅关键字 */
cursor: pointer;
cursor: auto;

/* 使用url并提供一个关键字值作为回退机制 */
cursor: url(hand.cur), pointer;

/* url和xy的坐标偏移值，最后提供一个关键字值作为回退机制 */
cursor:  url(cursor1.png) 4 12, auto;
cursor:  url(cursor2.png) 2 2, pointer;

/* 全局属性 */
cursor: inherit;
cursor: initial;
cursor: unset; 

cursor属性为零个或多个值，最后必填一个关键字值，它们之间用逗号分隔。指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果无法加载则返回下一个图像，如果无法加载图像或未指定图像，则返回关键字值。

每个后面都可选跟一对空格分隔的数字表示偏移。这些将设置光标相对于图像左上角的点。

例如，下面的例子使用值指定两个图像，为第二个图像提供坐标，如果两个图像都无法加载，则返回progress关键字值：

cursor: url(one.svg), url(two.svg) 5 5, progress;

浏览器支持

浏览器都支持cursor

语法：

cursor：[[]?,]*[ 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]

取值

• ：url(…)或者逗号分隔的url(…), url(…),…，指向图片文件。用大于一个值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非URL后备值。详情参见cursor属性中使用URL值。
• 可选 x，y坐标。无单位数字。
• 关键字值：见下表

鼠标悬浮于值上测试效果：

类型	CSS值		描述
General	auto		浏览器根据当前内容决定指针样式 例如当是内容是文字时使用text样式
default		默认指针，通常是箭头。
none		无指针被渲染
链接及状态	context-menu		指针下有可用内容目录。
help		指示帮助
pointer		悬浮于连接上时，通常为手
progress		程序后台繁忙，用户仍可交互(与wait相反).
wait		程序繁忙，用户不可交互(与progress相反).图标一般为沙漏或者表。
选择	cell		指示单元格可被选中
crosshair		交叉指针，通常指示位图中的框选
text		指示文字可被选中
vertical-text		指示垂直文字可被选中
拖拽	alias		复制或快捷方式将要被创建
copy		指示可复制
move		被悬浮的物体可被移动
no-drop		当前位置不能扔下 bug 275173Windows或Mac OS X中"no-drop 与not-allowed相同".
not-allowed		不能执行
grab		可抓取 译者注:grab和grabbing在比较后期才被支持，见浏览器兼容表
grabbing		抓取中
重设大小及滚动	all-scroll		元素可任意方向滚动（平移）. bug 275174Windows中,"all-scroll与move相同".
col-resize		元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
row-resize		元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头
n-resize		某条边将被移动。例如元素盒的东南角被移动时使用se-resize
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize		指示双向重新设置大小
ns-resize
nesw-resize
nwse-resize
缩放	zoom-in		指示可被放大或缩小
zoom-out

例子

.foo { cursor: crosshair; }

/* use prefixed-value if "zoom-in" isn't supported */
.bar { cursor: -webkit-zoom-in;  cursor: -moz-zoom-in;  cursor: zoom-in; }
 

/* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz { cursor: url(hyper.cur), auto }

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com