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 语法
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
默认指针,通常是箭头。 none
无指针被渲染 链接及状态 context-menu
指针下有可用内容目录。只有windows中的IE 10有效。 help
指示帮助 pointer
悬浮于连接上时,通常为手 progress
程序后台繁忙,用户仍可交互 (与 wait不同
).wait
程序繁忙(沙漏或表) 选择 cell
指示单元格可被选中 crosshair
交叉指针,通常指示位图中的框选 text
指示文字可被选中 vertical-text
指示垂直文字课被选中 拖拽 alias
复制或快捷方式将要被创建 copy
指示可复制 move
被悬浮的物体可被移动 no-drop
当前位置不能扔下
bug 275173Windows中 "no-drop 与not-allowed相同".not-allowed
不能执行 重设大小及滚动 all-scroll
元素可任意方向滚动 (平移).
bug 275174Windows中, "all-scroll 与 move相同".col-resize
元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头 row-resize
元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头
n-resize
某条边将被移动。例如元素盒的东南角被移动时 使用se-resize
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
指示双向重新设置大小 ns-resize
nesw-resize
nwse-resize
缩放 zoom-in
指示可被放大或缩小
zoom-out
- Mozilla特定关键字
Grab -moz-grab
元素可被抓起 不推荐在公开网页上使用这些指针。
使用自定图片指针会提供更好的浏览器兼容性
-moz-grabbing
元素被握住 示例
.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
cursorCandidate Recommendation 增加了一些关键字,位置语法及 url()
CSS Level 2 (Revision 1)
cursorRecommendation 首次定义 浏览器兼容性
Feature Chrome (WebKit) Firefox (Gecko) Internet Explorer Opera Safari auto
,crosshair
,default
,move
,text
,wait
,help
,n-resize
,e-resize
,s-resize
,w-resize
,ne-resize
,nw-resize
,se-resize
,sw-resize
1.0 1.0 (1.0) 4.0 7.0 1.2 hand
(just usepointer
for this purpose)未实现 未实现 4.0 未实现 未实现 pointer
,progress
1.0 1.0 (1.0|1.7) 6.0 7.x 1.2 | 3.0 url()
- See Using URL values1.0 (523) 1.5 (1.8)
On MacOs 4.0 (2.0).6.0 未实现 3.0 Positioning syntax for url()
values? (Yes) 未实现 ? ? not-allowed
,no-drop
,vertical-text
,all-scroll
,col-resize
,row-resize
1.0 (522) 1.5 (1.8) 6.0 10.6 3.0 alias
,cell
,copy
,ew-resize
,ns-resize
,nesw-resize
,nwse-resize
,context-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-in
,zoom-out
1.0 (522) -webkit- 1.0 (1.4) -moz- 未实现 11.6 3.0 -webkit- [1] Windows中的Mozilla和WebKit不适用
context-menu
, Opera中可用。
[2]alias
,cell
,copy
,none
在Windows Safari不适用, Mac中可用。参见
- Using URL values for the cursor property
pointer-events
- Webkit's cursor demos (including the extended ones:
zoom
,zoom-out
,grab
,grabbing
)- Cursor Property (MSDN)
- CSS 2.1 and CSS 3 cursor propery test
1
1
1
1
1
1
1
1
1
1
1
1
1