语法:

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

html中如何改变鼠标样式,HTML中常用鼠标样式相关推荐

  1. html5公共样式css,css常用公共样式

    /*style reset*/ body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,form,input,textarea,select{padding:0; margin:0;fon ...

  2. python的六大数据类型中可以改变_在python中更改数组的数据类型

    我通过生成一组随机数并将它们转换为int类型来创建数组.但是,我不认为我下面的方法是有效的.有没有最好的方法来改变数组中的数据类型?# standard normal distributed rand ...

  3. python中plt改变图像尺寸_Matplotlib中图像大小设置

    Matplotlib中图像大小设置 2019-10-15 23:53:30 来源: 晴天小雨 0 摘要:Matplotlib中figsize是设置图形大小的参数,接收一个元祖,内含两个元素,分别代表图 ...

  4. 技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效

    #vue3-cli4.5项目技巧1 router-link导航鼠标切换样式 vue3中.router-link-exact-active失效 vue3exact-active-classs失效 vue ...

  5. 【WPS-OFFICE-Word】 WPS中样式的运作原理?样式自动更新、自动改变如何处理?样式的管理方法?

    一.WPS中样式的运作原理 文档中的每一个文字或者段落,它的格式取决于两点--样式以及自定义修改. 比如内容A基于样式1,样式1的字体格式是五号宋体.段落格式是1.5倍行距: 我们在样式1的基础上,从 ...

  6. coreldraw梯形校正_CorelDRAW中如何改变用形状识别所绘制对象的轮廓

    原标题:CorelDRAW中如何改变用形状识别所绘制对象的轮廓 CorelDRAW的智能绘图工具能将手绘笔触识别转换成基本形状或平滑的曲线.它能自动识别多种形状,如椭圆,矩形,菱形,箭头,梯形等,并能 ...

  7. 从Chrome中的css自定义样式按钮中删除蓝色边框

    本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...

  8. php中图片怎么加样式,html5实现各种图片样式实例用法汇总

    在我们日常Web网页布局中,我们经常会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,常见有些网站鼠标指针是各种各样小图片样式,那么如何实现鼠标样式呢?下面我们就给大家来总结下实 ...

  9. html设置控件坐标,html表格按钮位置调整 html中怎样改变表格的位置

    如何设置html 表单按钮的位置? 设置html 表单按钮的位置的代码是: 超文本标记语言, 标准通用标记语言下的一个应用. " 超文本 "就是指页面内可以包含图片. 链接,甚至音 ...

  10. HTML中表格和表单的简单构造和样式

    现在一般网页上都有表单,也有表格,但是少. 表格 在HTML网页上建立表格需要有<table>标签 <table>标签中有主要标签有<tr>表格行.<th&g ...

最新文章

  1. 企业数据库合规的最佳实践
  2. python安装包为什么这么小-python为什么要安装到c盘
  3. 教你从0到1搭建秒杀系统-防超卖
  4. ABAP DESCRIBE语句
  5. C++-Loki Allocator
  6. i.mx6 Android5.1.1 servicemanager本地服务
  7. 2015年上半年 软件设计师 上午试卷 综合知识-2
  8. 排队枪毙游戏c语言,基于C语言实现的约瑟夫生者死者游戏
  9. Centos 系统swap虚拟内存添加与删除配置
  10. Java学习之FileInputStream与FileReader的区别
  11. EXTJS4自学手册——EXT基本方法、属性(mixins多继承、statics、require)
  12. 百度硬盘搜索结盟IBM,Lotus邮件也能搜索
  13. 资源协调与跨部门沟通技巧
  14. Package CJK Error: Invalid character code.
  15. 高级计算机网络(习题一加解析)
  16. wlop一张多少钱_回答:小白有个问题,为什么很多人都说 WLOP鬼刀 的画不够好?...
  17. 解决Chrome浏览器主页被篡改(劫持)hh899899.com的问题
  18. 回答几个很多人在问的问题,以及苏生不惑提供的服务
  19. 阿里巴巴2018招聘笔试题喝汽水
  20. 小米MIUI禁止系统更新

热门文章

  1. Google设置应用专用密码
  2. 新一线城市竞争力盘点,用Python绘制动态图带你看懂!
  3. FFmpeg png格式图片转yuv420
  4. 解决django admin表的外键关联数据过多响应时间过长问题
  5. 【python】错误SyntaxError: invalid syntax的解决方法总结
  6. Hessian矩阵以及在血管增强中的应用—OpenCV实现
  7. 深度学习炼丹术 —— Taoye不讲码德,又水文了,居然写感知器这么简单的内容
  8. 用Python实现辞职信
  9. dmp文件导入 Oracle 步骤
  10. 售前技能——寻找客户