自定义鼠标样式

 

今天突然用到cursor属性来自定义用户的鼠标手势，cursor:url(shared/mousedown.cur),pointer; 在firefox 与chrome中都能正常显示，但是ie系列都不行。

搜到一篇文章解释说明ie对cursor不认识相对路径的cur文件，必须要用相对根目录或者是绝对路径才能显示。即cursor:url(/common/skin/shared/mousedown.cur),pointer; 或 cursor:url(“http://www.xx.com/images/skin/mousedown.cur”), pointer;这样。 

属性的值可以是多个，其间用逗号分隔。假如第一个值不可以被客户端系统理解或所指定的光标无法找到及显示，则第二个值将被尝试使用。依此类推。假如全部值都不可用的话，则此属性不会发生作用。光标不会被改变。

标准写法：cursor: url(images/pen_il.cur),auto;
                cursor: url(mouse-notexist.cur), url(vote.gif), auto;

也可：cursor:url(images/logo_baidu.gif) 100 20,auto;

FF支持jpg、gif、cur等文件，不支持.ani
IE则只支持cur、ani

有的时候我们会用到自定义鼠标指针cursor，当我们将做好了的cur图标放在图片文件夹下面，在CSS文件中写上如下代码：

.setMouse{cursor:url("../images/skin/mouse.cur"), auto;}

却发现图标在IE浏览器中没有正常显示。经过测试，原因找到了，IE不支持在CSS文件中写相对路径的cursor。
解决办法很简单，改成相对根路径：

.setMouse{cursor:url("/images/skin/mouse.cur"), auto;}

或者是绝对路径：

.setMouse{cursor:url("http://www.vpedi.com/images/skin/mouse.cur"), auto;}

其他的鼠标样式：http://www.w3school.com.cn/css/pr_class_cursor.asp