语法: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-resizeurl ( 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比较好。

HTML中常用鼠标样式的更多相关文章

  1. web中自定义鼠标样式

    实现一个功能:鼠标移动到一个图片左边显示左箭头,移动到右边显示右箭头. 实现方法:一个img上面定位两个div,div的样式如下: .toleft { width: 200px; height: 30 ...

  2. 工作中常用css样式总结

    一.HTML隐藏文本输入框 有三种方法: 1.<input type="hidden" value=""> 这是对任何元素都起作用的: 2.< ...

  3. CSS中的鼠标样式明细

    <INPUT   TYPE="submit"   style="cursor:   hand"   value="hand">  ...

  4. css字体文本格式 鼠标样式

    缩进 text-indent 属性规定文本块中首行文本的缩进.(允许使用负值.如果使用负值,那么首行会被缩进到左边.) length 定义固定的缩进.默认值:0.% 定义基于父元素宽度的百分比的缩进. ...

  5. bootstrap课程3 bootstrap中常用的排版样式有哪些

    bootstrap课程3 bootstrap中常用的排版样式有哪些 一.总结 一句话总结:bootstrap里面对常用表情比如p.h1.code等html中的常用表情都修改了样式,照着手册用就好,样式 ...

  6. Wpf中鼠标样式的修改,作用点修改

    最近,在做一个控件的鼠标样式,Ps加了插件,可以编辑生成.cur格式的图标. 可是,所有的改完以后,调试运行,结果发现自己制作的图标的作用点总是在左上角,而不是在"手形"图标的食指 ...

  7. C#、WPF中如何自定义鼠标样式

    需求:在C#中如何自定义鼠标样式?在这里可以分两种情况,一种是在winForm,另一种是在WPF中(注意使用的Cursor对象不一样) 解决办法如下: a.首先针对WinForm中,我们可以采用图标加 ...

  8. html中的一些常用的样式标签

    html中的一些常用的样式标签 <p>这里是文本,<mark>高亮</mark></p> <strong>加粗,加重语气</stron ...

  9. wxpython中鼠标样式的获取与匹配

    在wxpython中定义有多种默认的鼠标样式,譬如:wx.CURSORCROSS wx.CURSORHAND等等, 此处按下不表,可以参考wxpython的samples里面自带的cursor例子 这 ...

随机推荐

  1. Tomcat中配置多个端口

    在tomcat的conf/server.xml中,配置多个端口,如下: <?xml version="1.0"?> <!--应用1,端口port="80 ...

  2. 转:更改 centos yum 源

    centos下可以通过yum很方便快捷的安装所需的软件和库,如果yum的源不好,安装速度会非常慢,centos默认官方源似乎都是国外的,所以速度无法保证,我一直使用163的源,感觉速度不错.下面就说说 ...

  3. Android 有趣味的GridView

    工作这么久以来,都是以解决需求为目标.渐渐发现这种学习方式不好,学到的知识能马上解决问题,但没有经过梳理归纳.故想系统总结下一些有趣味的知识点.在这篇博客中想以一个例子系统讲解下GridView控件涉 ...

  4. Java获取程序或项目路径的常用方法

    在写java程序时不可避免要获取文件的路径,比较常用的方法有: 1 在任意的class里调用: this.getClass().getClassLoader().getResource("/ ...

  5. 玩转12款Linux开源机器人

    玩转12款Linux开源机器人 头条网2016-02-15 09:04 3DR Solo智能无人机发布于2015年中期.作为试图与大疆广受欢迎的Phantom系列无人机相抗衡的产品,它的双处理器运行L ...

  6. 向Int数组插入随机1到100

    这是一个经典的面试题,考察了几个知识点 下边的代码是传统经典的做法 ]; ArrayList myList=new ArrayList(); Random rnd=new Random(); ) { ...

  7. ISNULL-sqlserver语句

    语法 ISNULL ( check_expression , replacement_value ) 参数 check_expression 将被检查是否为 NULL的表达式.check_expres ...

  8. js跨域问题新方案

    只要创建一个空图片. js代码: var data = "http://localhost:8080/test?id="+id+"&content="+ ...

  9. php中的后期静态绑定("Late Static Binding")

    在我们以往中,在类中使用self关键字的时候都是指向了被调用方法定义时的类,而非原始的调用类. 例如: class Animal{ static $IQ_lv_avg = 1; public stat ...

  10. 自定义H5页面规范

    查看详情页也可支持自定义H5页面,用来展示更多内容. 交互规范 分屏切换,支持横向和竖向,滑动指引需清晰 若详情页加载较慢,需设计loading页,给予用户友好的提示 如有视频,需在底部加上“建议在W ...