如何css鼠标

html-css013

如何css鼠标,第1张

CSS中添加CURSOR属性

body{ CURSOR: url('http://www.abcd.com/mouse.ani')}

http://www.abcd.com/mouse.ani为鼠标指针的文件。

注意,逗号分隔多个选择(左边优先),最后必须以标准的 CSS cursor 属性结束,如 pointer,auto 等。

甚至可以指定cursor 的坐标

cursor:url(images/logo_baidu.gif) 100 20,auto

<style>

div {cursor: url(mouse.cur), url(vote.gif), auto}

div:hover {background:#eee}

div#a {cursor: url(mouse-notexist.cur), url(vote.gif), auto}

div#b {cursor:url(images/logo_baidu.gif) 100 20,autoborder:solid 1px #666width:300pxheight:60px}

</style>

<div>test cursor here</div>

<div >test cursor here</div>

<div >test cursor here</div>

注意两个小问题:

1.firefox 暂时不支持 .ani

2.下面两个写法 firefox 都无法正确执行。

cursor: url(foo.cur)

后面没有 auto或者 pointer 等标准属性。

cursor: url(foo.cur), pointer, url(bar.cur), auto

uri 必须在前,标准属性在后。

指针没法可以设置成你自己的,也可以设置为通用的,比如沙漏

a{cursor:url(指针地址)}

url(指针地址)也可以写成

默认

default

文字/编辑

text

自动

auto

手形

pointer, hand(hand是IE专有)

可移动对象

move

不允许

not-allowed

无法释放

no-drop

等待/沙漏

wait

帮助

help

十字准星

crosshair

向上改变大小(North)

n-resize

向下改变大小(South)

s_resize 与n-resize效果相同

向左改变大小(West)

w-resize

向右改变大小(East)

e-resize 与w-resize效果相同

向左上改变大小(NorthWest)

nw-resize

向左下改变大小(SouthWest)

sw-resize

向右上改变大小(NorthEast)

ne-resize 与sw-resize效果相同

向右下改变大小(SouthEast)

se-resize 与nw-resize效果相同