语法: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. HTml <meta>标签的使用(重要)

    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 1.设置网页字符编码 <meta http-equiv=&q ...

  2. IOS制作一个漂亮的登录界面

    上图是Facebook的登录界面,看起来很漂亮,eamil框和passwod框合在一起,那么这种效果是怎么做出来的呢?我们都知道输入框用layer属性是可以做成圆角的形式,那么怎么样才能够仅仅只让上边 ...

  3. Tomcat 9.0安装配置

    本文转自:http://blog.sina.com.cn/s/blog_15126e2170102w5o8.html 一.JDK的安装与配置 1.从官网下载jdk,注意是jdk不是jre.最好从官网下 ...

  4. 001Spring4.2基本环境搭建

    1:工程目录以及依赖jar包如下,如果缺少某些jar包在weblogic控制台下面会有提示 2:applicationContext.xml配置文件 <?xml version="1. ...

  5. UOJ 216 Jakarta Skyscrapers

    http://uoj.ac/problem/216 题意:给定A,B,C,如果集合中有数i,j(i>j),那么集合就会增加i-j这个数,问有没有在初始集合为{A,B}400步内生成C的方案. 思 ...

  6. CSS3学习笔记(新属性)

    1. 边框(圆角边框.加阴影和用图片绘制) 新增加 border-radius  box-shadow  border-image .div1{ border:2px solid purple; bo ...

  7. 敏捷软件开发模型--SCRUM

    敏捷软件开发模型--SCRUM 一 什么是Scrum?Scrum (英式橄榄球争球队), 软件开发模型是敏捷开发的一种,在最近的一两年内逐渐流行起来. Scrum的基本假设是: 开发软件就像开发新产品 ...

  8. 使用GDB生成coredump文件【转载】

    本文转载自: http://blog.csdn.net/sky_qing/article/details/8548989 如果在测试过程中遇到某个进程的CPU利用率过高或者卡死而需要去调试该进程时,可 ...

  9. DAY TRADER

    日内交易是一种交易模式,英文名字是daytrade,主要是指持仓时间短,不留过夜持仓的交易方式.日内交易捕捉入市后能够马上脱离入市成本的交易机会,入市之后如果不能马上获利,就准备迅速离场.因为这种交易 ...

  10. XML的四种解析器原理及性能比较

    转自zsq 1.DOM     DOM 是用与平台和语言无关的方式表示 XML 文档的官方 W3C 标准.DOM 是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定信息.分 ...