cursor:改变鼠标样式

Posted 2020-08-24 H-art

前言：今天看百度的一个layui前端框架的时候，看到一个禁用图标的样式，鼠标移上去会变成一个自定义的图片样式，就在想难道cursor也可以自定义图片路径？！之前一直没有使用过。

使用了一下之后，遇到很多问题，比如图片的格式，后缀名以及大小等问题，然后查了一下相关资料。

语法：cursor:url(路径),auto;

         auto是需要跟的标准样式，浏览器会先加载你设定好的路径，如果没有，则加载auto里自定义的，auto,default等都可以。

 

关于图片的格式：

1，如果用图片（gif,png）等，不能超过32*32，否则浏览器不认识

2，IE浏览器不认识gif,png等的图片格式

3，firefox等标准浏览器不支持.ani格式。

4.firefox等标准浏览器好像也不支持动画效果的.cur文件。

5、鼠标样式文件一般是.cur .ani格式。IE都支持

 

当然用jquery也可以实现：

$(document).ready(function(){

      $(\'mouse\').hover(

　　　　function(){$this.css({cursor:"url(cvte.cur),auto"})},

　　　　function(){$this.css({cursor:"url(),auto"})})

})

<div class="mouse"></div>