陈建华的博客
专注web开发
css中cursor鼠标的46种样式大全(mn886)
2017-03-21 10:13:14   阅读1029次

在css中,可以指定一个dom(例如div,span,input)的鼠标样式。当鼠标移上去的时候,鼠标的样式就会发生改变,变成由开发者在css中设置的样式。下面列举了所有css的cursor的值和对应的样式:

cursor 样式 火狐 谷歌 IE Opera
Safari Edge
auto
default default.gif
none 5.0 9 15 5.0
context-menu context-menu.png
help help.gif
pointer pointer.gif
progress progress.gif
wait wait.gif
cell cell.gif
crosshair crosshair.gif
text text.gif
vertical-text vertical-text.gif
alias alias.gif
copy copy.gif
move move.gif
no-drop no-drop.gif
not-allowed not-allowed.gif
all-scroll all-scroll.gif
col-resize col-resize.gif
row-resize row-resize.gif
n-resize n-resize.gif
e-resize e-resize.gif
s-resize s-resize.gif
w-resize w-resize.gif
ne-resize ne-resize.gif
nw-resize nw-resize.gif
se-resize se-resize.gif
sw-resize sw-resize.gif
ew-resize 3-resize.gif
ns-resize 6-resize.gif
nesw-resize 1-resize.gif
nwse-resize 4-resize.gif
zoom-in zoom-in.gif 24 13 11.6 9
zoom-out zoom-out.gif 24 13 11.6 9
grab grab.gif 27 14
grabbing grabbing.gif 27 14
inherit
8.0 9.0
url()
-webkit-zoom-in zoom-in.gif 15-23
-webkit-zoom-out zoom-out.gif 15-23
-webkit-grab grab.gif 4.0
-webkit-grabbing grabbing.gif 4.0
-moz-zoom-in zoom-in.gif
-moz-zoom-out zoom-out.gif
-moz-grab grab.gif
-moz-grabbing grabbing.gif

兼容性样式写法:

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,否则个浏览器表现差异很大



-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
暂无评论
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航