html中如何改变鼠标样式,HTML中常用鼠标样式
语法:
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中常用鼠标样式相关推荐
- 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 ...
- python的六大数据类型中可以改变_在python中更改数组的数据类型
我通过生成一组随机数并将它们转换为int类型来创建数组.但是,我不认为我下面的方法是有效的.有没有最好的方法来改变数组中的数据类型?# standard normal distributed rand ...
- python中plt改变图像尺寸_Matplotlib中图像大小设置
Matplotlib中图像大小设置 2019-10-15 23:53:30 来源: 晴天小雨 0 摘要:Matplotlib中figsize是设置图形大小的参数,接收一个元祖,内含两个元素,分别代表图 ...
- 技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效
#vue3-cli4.5项目技巧1 router-link导航鼠标切换样式 vue3中.router-link-exact-active失效 vue3exact-active-classs失效 vue ...
- 【WPS-OFFICE-Word】 WPS中样式的运作原理?样式自动更新、自动改变如何处理?样式的管理方法?
一.WPS中样式的运作原理 文档中的每一个文字或者段落,它的格式取决于两点--样式以及自定义修改. 比如内容A基于样式1,样式1的字体格式是五号宋体.段落格式是1.5倍行距: 我们在样式1的基础上,从 ...
- coreldraw梯形校正_CorelDRAW中如何改变用形状识别所绘制对象的轮廓
原标题:CorelDRAW中如何改变用形状识别所绘制对象的轮廓 CorelDRAW的智能绘图工具能将手绘笔触识别转换成基本形状或平滑的曲线.它能自动识别多种形状,如椭圆,矩形,菱形,箭头,梯形等,并能 ...
- 从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
- php中图片怎么加样式,html5实现各种图片样式实例用法汇总
在我们日常Web网页布局中,我们经常会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,常见有些网站鼠标指针是各种各样小图片样式,那么如何实现鼠标样式呢?下面我们就给大家来总结下实 ...
- html设置控件坐标,html表格按钮位置调整 html中怎样改变表格的位置
如何设置html 表单按钮的位置? 设置html 表单按钮的位置的代码是: 超文本标记语言, 标准通用标记语言下的一个应用. " 超文本 "就是指页面内可以包含图片. 链接,甚至音 ...
- HTML中表格和表单的简单构造和样式
现在一般网页上都有表单,也有表格,但是少. 表格 在HTML网页上建立表格需要有<table>标签 <table>标签中有主要标签有<tr>表格行.<th&g ...
最新文章
- 企业数据库合规的最佳实践
- python安装包为什么这么小-python为什么要安装到c盘
- 教你从0到1搭建秒杀系统-防超卖
- ABAP DESCRIBE语句
- C++-Loki Allocator
- i.mx6 Android5.1.1 servicemanager本地服务
- 2015年上半年 软件设计师 上午试卷 综合知识-2
- 排队枪毙游戏c语言,基于C语言实现的约瑟夫生者死者游戏
- Centos 系统swap虚拟内存添加与删除配置
- Java学习之FileInputStream与FileReader的区别
- EXTJS4自学手册——EXT基本方法、属性(mixins多继承、statics、require)
- 百度硬盘搜索结盟IBM,Lotus邮件也能搜索
- 资源协调与跨部门沟通技巧
- Package CJK Error: Invalid character code.
- 高级计算机网络(习题一加解析)
- wlop一张多少钱_回答:小白有个问题,为什么很多人都说 WLOP鬼刀 的画不够好?...
- 解决Chrome浏览器主页被篡改(劫持)hh899899.com的问题
- 回答几个很多人在问的问题,以及苏生不惑提供的服务
- 阿里巴巴2018招聘笔试题喝汽水
- 小米MIUI禁止系统更新