2024年6月1日发(作者:)

js设置鼠标光标形状

鼠标的形状各种各样,有不同的样式,你知道怎么在js上设置吗?

不知道的话,跟着店铺一起学习吧。

js 设置鼠标光标形状

auto(default)

默认值。浏览器根据当前情况自动确定鼠标光标类型。

有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标

题栏可以被水平改变尺寸。

简单的十字线光标。

有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可

以向上下左右任何方向滚动。

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

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

带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象

不允许在光标的当前位置被放下。

禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不

允许被执行。

col-resize

crosshair

all-scroll

move

help

no-drop

not-allowed

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

pointer(hand)

那样。

progress

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

有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标

题栏可以被垂直改变尺寸。

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

用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度

的形状。

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

状。

用于标示对象可被改变尺寸方向的箭头光标。

w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-

resize | nw-resize

row-resize

text

vertical-text

wait

*-resize

"/TR/xhtml1/DTD/">

1

charset=utf-8" />

2

js 光标设置

3

4

5

6

7

/>

type="button" value="col-resize"

8

9

onclick=SetCursor("col-resize") />

10

onclick=SetCursor("row-resize") />

11

12

onclick=SetCursor("all-scroll") />

13

14

onclick=SetCursor("crosshair") />

15

16

/>

17

/>

18

19

drop") />

20

21

onclick=SetCursor("not-allowed") />

22

23

onclick=SetCursor("pointer") />

24

25

onclick=SetCursor("progress") />

26

/>

27

28

onclick=SetCursor("vertical-text") />

29

30

/>

31

32

resize") />

33

34

35

auto; background-color: blue; color:#FFF;">移动鼠标到此查看效果

36