自定义鼠标指针样式

版权声明:转载来源 《张益达的博客》 https://blog.csdn.net/weixin_44538399 https://blog.csdn.net/weixin_44538399/article/details/87905337

自定义鼠标指针样式

更改鼠标指针的样式,只要通过css属性中的cursor就可以简单实现。
常见的有以下几种:

all-scroll:指可以沿任意方向滚动项目。通常呈现为包含中间点的向上箭头、向下箭头、向左箭头和向右箭头

在这里插入图片描述

grab:指示可以获取某些内容(通过拖动的方式)。通常呈现为一只张开手的背面。

在这里插入图片描述

pointer:光标是指示链接的指针。

在这里插入图片描述

wait:指示程序处于忙碌状态,用户应等待。通常呈现为一个手表或沙漏。

在这里插入图片描述

none:不显示任何指针。

text:指示可以选择的文本。通常呈现为一个垂直丨形。

在这里插入图片描述

zoom-in / zoom-out:指示可以缩放的项目,通常呈现为中间有“+”和“-”符号的放大镜,分别表示“放大”和“缩小”

在这里插入图片描述在这里插入图片描述

url():自定义鼠标样式,可使用后缀名为.cur、.ico(静态图)、.anr(动态图)等的文件作为鼠标指针样式。
自定义鼠标显示图标,需注意下面几个问题

图标的格式:

---------IE支持cur,ani,ico这三种格式,FF支持bmp,gif,jpg,cur,ico这几种格式,
---------不支持ani格式,也不支持gif动画格式,因此来说一般将url引用的图片存为ico或cur格式比较好!

图片的大小:

---------图片大小最好是32*32的大小。否则可能会导致图标大小不一致的问题!
  body{
 	cursor:url(../../Content/img/Login/normal.cur),auto;
}

效果:在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44538399/article/details/87905337