收集一些CSS cursor鼠标样式应用

本文将介绍关于css cursor鼠标样式的应用效果,对于写css的,有些可能你还没有注意到,css是怎么控制鼠标的各种样式呢?不同的浏览器也有各种不同的hack哦。分享一下给大家。

cursor: 鼠标
Cursor:值
值: [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit
[ ,]*: 用户定义的资源显示 (图片路径)如:cursor:url(http://www.yfong.cn/鼠标样式文件.ani);
auto: 正常鼠标
手 cursor:pointer;
cursor:hand;
写两个是为了照顾IE5,它只认hand。
等待/沙漏 cursor:wait;
crosshair: 十字鼠标
default: 默认鼠标
pointer: 点状鼠标
move: 移动鼠标
text: 文字鼠标
wait: 等待鼠标
help: 求助鼠标
progress: 过程鼠标
inherit: 继承
效果(鼠标分别指向下面的段落):

十字准心cursor:crosshair;

手 cursor:pointer;

cursor:hand;

写两个是为了照顾IE5,它只认hand。

等待/沙漏 cursor:wait;

帮助 cursor:help;

无法释放 cursor:no-drop;

文字/编辑 cursor:text;

可移动对象 cursor:move;

向上改变大小 cursor:n-resize;

向下改变大小 cursor:s-resize;

向右改变大小 cursor:e-resize;

向左改变大小 cursor:w-resize;

向上右改变大小 cursor:ne-resize;

向上左改变大小 cursor:nw-resize;

向下右改变大小 cursor:se-resize;

向下左改变大小 cursor:sw-resize;

自动 cursor:auto;

禁止 cursor:not-allowed;

处理中 cursor:progress;

系统默认 cursor:default;

用户自定义 cursor:url('#');#=光标文件地址(注意文件格式必须为.cur或.ani).

声明: 未经本站许可,谢绝转载!

0 个主题帖 其中:热心观众:0 个, 管理员:0 个

抱歉,评论被关闭