原来cursor:可以这样改变鼠标样式
前言:今天看百度的一个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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步