鼠标自定义样式美化-附图标下载

一、前言

逛博客的时候，无意中看到有的博客网站里面弄了把默认的额鼠标效果改了，觉得挺好看的，美观性好很多。

对于喜欢瞎整腾的我，本站自然也不能落下，这个自定义鼠标样式美化有两种，一个用于所有状态显示，一个用于链接状态显示。具体效果参考本站如下图所示：

二、具体使用

从上图中可以看到，鼠标颜色是变化的，移上有超链接的地方就会变另外一种，其实这两个样子也是一样，只是颜色不同导致的图片。

1，添加css样式代码：

在wordpress网站后台左侧菜单中选择，外观->自定义->额外CSS->复制的CSS到粘贴里面即可。在本地或者其他的程序中，直接复制到网页style样式文件中即可，下方css代码中图片链接地址为演示的，url后面的地址需要自己替换自己图片，图片素材文章末尾可下载。

  /** 鼠标样式 开始**/
/** 普通指针样式**/
body {
cursor: url(https://syfaka.com/xxxx/cursor_1.png), default;
}
/** 链接指针样式**/
a:hover{cursor:url(https://syfaka.com/xxxx/cursor_2.png), pointer;
}
/** 鼠标样式 结束**/

提示：如果不想再移动端显示，可以通过媒体查询限制只能pc端使用

@media screen and (min-width: 850px) {
/*css样式代码填写如下*/
}

2，将上述代码中的两个url中的图片链接地址，换成自己的鼠标样式图标即可，

在自己网站根目录新建一个目录shubiao，然后把本站下载的鼠标样式图片，上传到刚新建的shubiao中，访问地址比如：https://soujiz.com/shubiao/文件名称。替换代码中的图片地址即可完成鼠标美化了。

鼠标素材下载：

本人收集的一些常用的图标分享给大家，欢迎自取。鼠标图标可以根据自己喜好进行选择。