在CSS中，可以使用cursor属性来设置鼠标手势。下面本篇文章就来给大家介绍一下cursor属性。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。有时我们需要动态的变化光标样式时就需要这个属性。

属性值(手势状态)：auto : 默认值。浏览器根据当前情况自动确定鼠标光标类型。

all-scroll : IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。

col-resize : IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。

crosshair : 简单的十字线光标。

default : 客户端平台的默认光标。通常是一个箭头。

hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

move : 十字箭头光标。用于标示对象可被移动。

help : 带有问号标记的箭头。用于标示有帮助信息存在。

no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。

not-allowed : IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。

pointer : IE6.0 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

progress : IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。

row-resize : IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。

text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。

vertical-text : IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。

wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。

*-resize : 用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize

url ( url ) : IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。

演示

总体测试代码

cursor样式演示

.cursorDiv{

width: 300px;

height:150px;

background: #FF6600;

border:solid 1px;

cursor:url('img/sanchaji.png'),pointer;

}

Jquery操作$(".cursorDiv").css({"cursor":"progress",})

1.cursor:url()

可以将光标图形自定义为自己喜欢的图标样式，url()里是一个图标的连接，可以是png、ico、gif等，注意，要在url()后面定义一个普通的光标，否则自定义的图标不起作用！cursor:url('img/sanchaji.png'),pointer;

结果样式

2.cursor:default

默认光标(通常是一个箭头)cursor:default;

结果样式

3.cursor:auto

默认。浏览器设置的光标。cursor:auto;

结果样式

4.cursor:crosshair

光标呈现为十字线。cursor:crosshair;

结果样式

5.cursor:pointer

光标呈现为指示链接的指针(一只手)cursor:pointer;

结果样式

6.cursor:move

此光标指示某对象可被移动。cursor:move;

结果样式

7.cursor:e-resize

此光标指示矩形框的边缘可被向右(东)移动。cursor:e-resize;

结果样式

8.cursor:ne-resize

此光标指示矩形框的边缘可被向上及向右移动(北/东)。cursor:ne-resize;

结果样式

9.cursor:nw-resize

此光标指示矩形框的边缘可被向上及向左移动(北/西)。cursor:nw-resize;

结果样式

10.cursor:n-resize

此光标指示矩形框的边缘可被向上(北)移动。cursor:n-resize;

结果样式

11.cursor:se-resize

此光标指示矩形框的边缘可被向下及向右移动(南/东)。cursor:se-resize;

结果样式

12.cursor:sw-resize

此光标指示矩形框的边缘可被向下及向左移动(南/西)。cursor:sw-resize;

结果样式

13.cursor:s-resize

此光标指示矩形框的边缘可被向下移动(南)。cursor:s-resize;

结果样式

14.cursor:w-resize

此光标指示矩形框的边缘可被向左移动(西)。cursor:w-resize;

结果样式

15.cursor:text

此光标指示文本。cursor:text;

结果样式

16.cursor:wait

此光标指示程序正忙(通常是一只表或沙漏)。cursor:wait;

结果样式

17.cursor:help

此光标指示可用的帮助(通常是一个问号或一个气球)。cursor:help;

结果样式

18.cursor:progresscursor:progress;

结果样式

测试浏览器为Chrome

更多web开发知识，请查阅 HTML中文网 ！！