本文将介绍关于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).