在css中,可以指定一个dom(例如div,span,input)的鼠标样式。当鼠标移上去的时候,鼠标的样式就会发生改变,变成由开发者在css中设置的样式。下面列举了所有css的cursor的值和对应的样式:
cursor | 样式 | 火狐 | 谷歌 | IE |
Opera |
Safari | Edge |
auto |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
default |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
none |
![]() |
5.0 | 9 | 15 | 5.0 |
![]() |
|
context-menu |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
help |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
pointer |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
progress |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
wait |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
cell |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
crosshair |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
text |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
vertical-text |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
alias |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
copy |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
move |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
no-drop |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
not-allowed |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
all-scroll |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
col-resize |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
row-resize |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
n-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 |
![]() |
24 |
![]() |
13 | 11.6 | 9 |
![]() |
zoom-out |
![]() |
24 |
![]() |
13 | 11.6 | 9 |
![]() |
grab |
![]() |
27 |
![]() |
14 |
![]() |
![]() |
![]() |
grabbing |
![]() |
27 |
![]() |
14 |
![]() |
![]() |
![]() |
inherit |
![]() |
![]() |
8.0 | 9.0 |
![]() |
![]() |
|
url() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
-webkit-zoom-in |
![]() |
![]() |
![]() |
![]() |
15-23 |
![]() |
![]() |
-webkit-zoom-out |
![]() |
![]() |
![]() |
![]() |
15-23 |
![]() |
![]() |
-webkit-grab |
![]() |
![]() |
![]() |
![]() |
![]() |
4.0 |
![]() |
-webkit-grabbing |
![]() |
![]() |
![]() |
![]() |
![]() |
4.0 |
![]() |
-moz-zoom-in |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
-moz-zoom-out |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
-moz-grab |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
-moz-grabbing |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
兼容性样式写法:
zoom-in:
cursor: zoom-in;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
zoom-out:
cursor: zoom-out;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
grab:
cursor: grab;
cursor: -webkit-grab;
cursor: -moz-grab;
grabbing:
cursor: grabbing;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
自定义浏览器鼠标样式:
cursor:url(http://localhost/d2/matches.cur),url(http://localhost/d2/matches.cur),n-resize;
-
IE6也支持cursor属性的URL值,然而,IE只支持CUR和ANI的格式。
-
IE不支持CSS3的坐标。这时候光标图片将被忽略。
-
Firefox1.5 (Gecko1.8), Windows and Linux和Safari3.0 (Webkit522-523)支持.cur | .png | .gif | .jpg和xy坐标值。
-
Firefox4.0 (Gecko2.0)支持.cur | .png | .gif | .jpg | .svg,(Gecko 2.0)支持xy坐标值。
-
opera不支持。
-
IE6/IE7/IE8对图标大小有限制,最佳尺寸32*32(小尺寸图标会被拉伸,大的会被压缩),其它浏览器按图标实际大小显示。
cur文件必须为32*32,否则个浏览器表现差异很大
-----------------------------------------------------
转载请注明来源此处
原地址:#
发表