html中如何改变鼠标样式,HTML中常用鼠标样式

语法:

cursor : auto |

all-scroll | col-resize|

crosshair | default |

hand | move |

help | no-drop |

not-allowed | pointer |

progress | row-resize |

text | vertical-text |

wait | *-resize | url (

url )

取值:

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 )。

说明:

设置或检索在对象上移动的鼠标指针采用的光标形状。

此属性的值可以是多个,其间用逗号分隔。假如第一个值不可以被客户端系统理解或所指定的光标无法找到及显示,则第二个值将被尝试使用。依此类推。假如全部值都不可用的话,则此属性不会发生作用。光标不会被改变。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 cursor 。

示例:

p { cursor: text; }

a { cursor: pointer; }

body { cursor: url("mycursor.gif"),

url("images/cursors/footcursor.jpg"), default; }

把你的光标放到相应文字上鼠标显示效果

注意光标的实际效果依赖于用户的系统设置,与你在这里看到的效果不一定完全一致。

cursor: auto;

a4c26d1e5885305701be709a3d33442f.png

自动

The browser sets a cursor

浏览器设置一个游标

cursor:all-scroll;

上下左右任何方向滚动

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

cursor: crosshair;

a4c26d1e5885305701be709a3d33442f.png

十字准心

The cursor render as a crosshair

游标表现为十字准线

cursor: pointer;

cursor: hand;

写两个是为了照顾IE5,它只认hand。

a4c26d1e5885305701be709a3d33442f.png

The cursor render as a pointer (a hand) that indicates a

link

游标以暗示(手指)的形式来表明有一个连接

cursor: wait;

a4c26d1e5885305701be709a3d33442f.png

等待/沙漏

The cursor indicates that the program is busy (often a watch or

an hourglass)

游标暗示当前程序正忙(一般为一块表或是一个沙漏)

cursor: help;

a4c26d1e5885305701be709a3d33442f.png

帮助

The cursor indicates that help is available (often a question

mark or a balloon)

游标暗示当前位置可得到帮助(一般为问号或是气球)

cursor: no-drop;

a4c26d1e5885305701be709a3d33442f.png

无法释放

cursor: no-drop;

cursor: text;

a4c26d1e5885305701be709a3d33442f.png

文字/编辑

The cursor indicates text

游标暗示当前所处位置为文字内容

cursor: move;

a4c26d1e5885305701be709a3d33442f.png

可移动对象

The cursor indicates something that should be moved

游标暗示一些东西应该被移动

cursor:vertical-text

可编辑的垂直文本的光标

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

cursor: n-resize;

a4c26d1e5885305701be709a3d33442f.png

向上改变大小(North)

The cursor indicates that an edge of a box is to be moved up

(north)

边缘可向上移动(北)

cursor: s-resize;

a4c26d1e5885305701be709a3d33442f.png

向下改变大小(South)

The cursor indicates that an edge of a box is to be moved down

(south)

边缘可向下方移动(南)

cursor: e-resize;

a4c26d1e5885305701be709a3d33442f.png

向右改变大小(East)

The cursor indicates that an edge of a box is to be moved right

(east)

box边缘可向右(东)边移动

cursor: w-resize;

a4c26d1e5885305701be709a3d33442f.png

向左改变大小(West)

The cursor indicates that an edge of a box is to be moved left

(west)

边缘可向左移动(西)

cursor: ne-resize;

a4c26d1e5885305701be709a3d33442f.png

向上右改变大小(North East)

The cursor indicates that an edge of a box is to be moved up and

right (north/east)

游标暗示box的边缘可向右上方移动(东北方向)

cursor: nw-resize;

a4c26d1e5885305701be709a3d33442f.png

向上左改变大小(North West)

The cursor indicates that an edge of a box is to be moved up and

left (north/west)

边缘可向左上方移动(西北)

cursor: se-resize;

a4c26d1e5885305701be709a3d33442f.png

向下右改变大小(South East)

The cursor indicates that an edge of a box is to be moved down

and right (south/east)

边缘可向右下方移动(东南)

cursor: sw-resize;

a4c26d1e5885305701be709a3d33442f.png

向下左改变大小(South West)

The cursor indicates that an edge of a box is to be moved down

and left (south/west)

边缘可向左下方移动(西南)

cursor:col-resize;

项目可被水平改变尺寸

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

cursor:row-resize;

项目可被垂直改变尺寸

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

cursor:not-allowed;

a4c26d1e5885305701be709a3d33442f.png

禁止

cursor:not-allowed;

cursor: progress;

a4c26d1e5885305701be709a3d33442f.png

处理中

cursor: progress;

cursor: default;

a4c26d1e5885305701be709a3d33442f.png

系统默认

The default cursor (often an arrow)

默认的游标状态(通常为一个箭头)

cursor: url(' # ');

# =

光标文件地址 (注意文件格式必须为:.cur 或 .ani)。

a4c26d1e5885305701be709a3d33442f.png

用户自定义(可用动画)

The url of a custom cursor to be used.

自定义游标的url位置

Note: Always define a generic cursor at the end of the list in

case none of the url-defined cursors can be used

注意:在定义完自定义的游标之后在末尾加上一般性的游标,以防那些url所定义的游标不能使用

但要说明一点:cursor:

hand不符合标准,所以如果希望是手型的话还是用cursor: pointer比较好。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值