语法:
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属性对应的鼠标图片与说明
css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载css层叠样式表手册_css样式表_css层叠样式表_css样式表下载
人民邮电(图灵)-CSS重构:样式表性能调优.201711.epub 人民邮电(图灵)-CSS重构:样式表性能调优
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了 CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多 栏布局等模块 [1] 。 CSS演进的...
css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表css样式表
CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式表中文手册CSS层叠样式...
分享的是来自麦子学院网课,关于CSS层叠样式表的知识结构图,用的思维导图工具是xmind,一款免费的思维导图工具
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常...
插件描述:css3最新鼠标划过样式,使用纯css3打造的最新的鼠标划过样式的展示. 参考示例:http://www.jq22.com/jquery-info5808
中文翻译为样式表! 它的作用简单的说:就是可以使你在同一页面里使用不同的超链接样式。 更神奇的是,用CSS,仅仅改变一个文件就可以改变数百个网页的外观......个性化的表现而不损失访问者......所有这些都因为...
CSS hack浏览器兼容一览表,html文件。
css2.0样式表中文手册,css2.0样式表中文手册css2.0样式表中文手册
css样式表手册->web前端样式开发->中文
CSS样式表中文手册.zip CSS样式表中文手册 CSS样式表 CSS样式手册 CSS样式 CSS
CSS样式一览表CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和...
CSS_5日精通CSS层叠样式表.chm CSS_精通CSS滤镜.chm CSS样式表.CHM css样式表滤镜.chm
css的重置样式css的重置样式css的重置样式css的重置样式css的重置样式
自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式自用css样式
CSS+2.0样式表中文手册