CSS cursor鼠标样式一览表

精贴 置顶
11172 0

语法: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;


自动

The browser sets a cursor

浏览器设置一个游标

cursor:all-scroll;

上下左右任何方向滚动

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

cursor: crosshair;


十字准心

The cursor render as a crosshair

游标表现为十字准线

cursor: pointer;

cursor: hand;

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


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

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

cursor: wait;


等待/沙漏

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

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

cursor: help;


帮助

The cursor indicates that help is available (often a question mark or a balloon)

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

cursor: no-drop;


无法释放

cursor: no-drop;

cursor: text;


文字/编辑

The cursor indicates text

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

cursor: move;


可移动对象

The cursor indicates something that should be moved

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

cursor:vertical-text

可编辑的垂直文本的光标

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

cursor: n-resize;


向上改变大小(North)

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

边缘可向上移动(北)

cursor: s-resize;


向下改变大小(South)

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

边缘可向下方移动(南)

cursor: e-resize;


向右改变大小(East)

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

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

cursor: w-resize;


向左改变大小(West)

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

边缘可向左移动(西)

cursor: ne-resize;


向上右改变大小(North East)

The cursor indicates that an edge of a box is to be moved up and right (north/east)

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

cursor: nw-resize;


向上左改变大小(North West)

The cursor indicates that an edge of a box is to be moved up and left (north/west)

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

cursor: se-resize;


向下右改变大小(South East)

The cursor indicates that an edge of a box is to be moved down and right (south/east)

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

cursor: sw-resize;


向下左改变大小(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;


禁止

cursor:not-allowed;

cursor: progress;


处理中

cursor: progress;

cursor: default;


系统默认

The default cursor (often an arrow)

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

cursor: url(' # ');

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


用户自定义(可用动画)

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比较好。

  • 没有任何评论
今日天气 ···

···

···

···

热门排行
CSS cursor鼠标样式一览表 2012-06-25
.NET后台写JS代码 2011-11-03
网站地址多出jdfwkey的问题解析及... 2010-08-25
数据库xxx的日志已满,请备份该数... 2013-07-19
百度、google、Yahoo网站地图制作... 2011-01-30
<a>标签的伪类书写顺序问题... 2010-09-04
什么是长尾关键词? 2010-09-24
CEO名言 2010-08-31
Mysql 主从数据库同步 2010-09-12
用ASP实现网页BBS 2010-11-01
博主推荐
本个人博客微信公众平台上线啦~~... 2013-10-13
饼哥网络互联上线啦~~要买域名空... 2013-09-20
网站title标题如何正确修改不会被... 2013-08-26
饼哥通讯录系统上线啦,欢迎大家... 2013-08-24
ASP .NET MYSQL 的简单分页 并不... 2013-08-19
网站有弹窗广告这样的站点,百度... 2013-08-17
做淘宝SEO优化需要注意的8大问题 2013-08-17
淘宝网怎么做SEO优化 2013-08-17
站长们要学习的“苍井空精神” 2013-08-17
苹果公司今日发布了iOS 7第五个开... 2013-08-07
随便看看
备份和恢复Windows中的IIS服务器... 2010-09-02
浅析asp.net验证控件失效原因及解... 2013-07-19
看懂这些故事 你做人就很成功了 2010-10-14
布尔逻辑运算符 2010-10-18
Dynamic URL-动态页面 2010-09-20
关于URL组成部分的指南 2010-09-23
Google网站管理员工具 2010-09-23
80后,还记得我们作文的必杀句吗... 2010-10-14
点对点arp欺骗攻击 2010-11-05
修正IE6的bug的10个技巧 2010-09-06
RSS新闻
传媒新闻
CSDN
八卦新闻
女性新闻
台湾新闻
互联网
军事-新浪博客
IT-新浪博客
汽车新闻
游戏新闻
国际新闻
国内新闻
体育新闻
我的微博
北京 上海 杭州 深圳 广州 成都