《CSS（层叠样式表） 学习笔记之 cursor》

cursor 简介

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

cursor: help;

cursor: wait;

cursor: crosshair;

cursor: not-allowed;

cursor: zoom-in;

cursor: grab;

cursor: help; 指示帮助 效果如下：

cursor: help;

cursor: wait; 效果如下：

cursor: wait;

cursor: crosshair; 效果如下：

cursor: crosshair;

cursor: not-allowed; 效果如下：

cursor: not-allowed;

cursor: zoom-in; 效果如下：

cursor: zoom-in;

cursor: grab; 效果如下：

cursor: grab;

语法

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

关键字值

cursor: pointer;

cursor: grab;

cursor: auto; 浏览器根据当前内容决定指针样式

cursor: progress; 程序后台繁忙，用户仍可交互 (与wait相反).

使用 URL，并提供一个关键字值作为备用

cursor: url(hand.cur), pointer;

最后必须提供一个非 URL 后备值

URL 和 xy 的坐标偏移值，最后提供一个关键字值作为备用

每个后面都可选跟一对空格分隔的数字表示偏移。它们用来设置指针的热点(即自定义图标的实际点击位置)，位置相对于图标的左上角

可选 x，y坐标, 两个小于 32 的无单位非负数

cursor: url(cursor1.png) 4 12, auto;

cursor: url(cursor2.png) 2 2, pointer;

全局属性

cursor: inherit;

cursor: initial;

cursor: unset;