cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

1

1

cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor

概述

cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

初始值 auto
适用元素 all elements
是否是继承属性 yes
适用媒体 visual, interactive
计算值 as specified, but with URIs made absolute
是否适用于 CSS 动画
正规顺序 the unique non-ambiguous order defined by the formal grammar

语法

如何阅读 CSS 语法。

Formal syntax: [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]

<uri>
url(…)或者逗号分隔的url(…), url(…), …,指向图片文件。用大于一个<uri>值提供后备,以防某些指针图片类型不被支持。最后必须提供一个非URL后备值。详情参见cursor属性中使用URL值
<x> <y> 
可选 x,y坐标。无单位数字。
关键字值

鼠标悬浮于值上测试效果:

类型 CSS值   描述
General auto  

浏览器根据当前内容决定指针样式
例如当是内容是文字时使用text样式

default cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 默认指针,通常是箭头。
none   无指针被渲染
链接及状态 context-menu cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 指针下有可用内容目录。只有windows中的IE 10有效。
help cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 指示帮助
pointer cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 悬浮于连接上时,通常为手
progress cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 程序后台繁忙,用户仍可交互 (与wait不同).
wait cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 程序繁忙(沙漏或表)
选择 cell cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 指示单元格可被选中
crosshair cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 交叉指针,通常指示位图中的框选
text cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 指示文字可被选中
vertical-text cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 指示垂直文字课被选中
拖拽 alias cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 复制或快捷方式将要被创建
copy cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 指示可复制
move cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 被悬浮的物体可被移动
no-drop cursor CSS属性定义鼠标指针悬浮在元素上时的外观。当前位置不能扔下
bug 275173Windows中 "no-drop 与not-allowed相同".
not-allowed cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 不能执行
重设大小及滚动 all-scroll cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 元素可任意方向滚动 (平移).
bug 275174Windows中, "all-scroll 与 move相同".
col-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
row-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头

n-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 某条边将被移动。例如元素盒的东南角被移动时使用se-resize
e-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
s-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
w-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
ne-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
nw-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
se-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
sw-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
ew-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 指示双向重新设置大小
ns-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
nesw-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
nwse-resize cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
缩放 zoom-in cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

指示可被放大或缩小

zoom-out cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
Mozilla特定关键字
Grab -moz-grab cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 元素可被抓起

不推荐在公开网页上使用这些指针。

使用自定图片指针会提供更好的浏览器兼容性

-moz-grabbing cursor CSS属性定义鼠标指针悬浮在元素上时的外观。 元素被握住

示例

查看在线演示

.foo { cursor: crosshair; }

/* use prefixed-value if "zoom-in" isn't supported */
.bar { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } /* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz { cursor: url(hyper.cur), auto }

规范

规范 状态 备注
CSS Basic User Interface Module Level 3
cursor
Candidate Recommendation 增加了一些关键字,位置语法及url()
CSS Level 2 (Revision 1)
cursor
Recommendation 首次定义

浏览器兼容性

Feature Chrome (WebKit) Firefox (Gecko) Internet Explorer Opera Safari
autocrosshairdefaultmovetextwait,helpn-resizee-resizes-resizew-resize,ne-resizenw-resizese-resizesw-resize 1.0 1.0 (1.0) 4.0 7.0 1.2
hand (just use pointer for this purpose) 未实现 未实现 4.0 未实现 未实现
pointerprogress 1.0 1.0 (1.0|1.7) 6.0 7.x 1.2 | 3.0
url() - See Using URL values 1.0 (523) 1.5 (1.8)
On MacOs 4.0 (2.0).
6.0 未实现 3.0
Positioning syntax for url() values  ? (Yes) 未实现 ? ?
not-allowedno-dropvertical-textall-scrollcol-resizerow-resize 1.0 (522) 1.5 (1.8) 6.0 10.6 3.0
aliascellcopyew-resizens-resizenesw-resizenwse-resizecontext-menu 1.0 (522 )[1] 1.5 (1.8 )[1] 未实现 10.6 [1] 3.0 [2]
none 5.0 (533) 3.0 (1.9) 9.0 未实现 5.0 [2]
inherit 1.0 1.0 8.0 9.0 1.2
zoom-inzoom-out  1.0 (522) -webkit- 1.0 (1.4) -moz- 未实现 11.6 3.0 -webkit-

[1] Windows中的Mozilla和WebKit不适用context-menu , Opera中可用。
[2] aliascellcopynone 在Windows Safari不适用, Mac中可用。

参见

1

1

1

1

1

1

1

1

1

1

1

1

1

上一篇:在Windows服务中托管 ASP.NET Core的坑


下一篇:C语言高级程序设计——进制算法以及位算符号