让你的网站与众不同：使用 Breeze Contrast 鼠标指针样式美化网站

HaoranZing 字数: 3093 阅读耗时: 7 分钟 2023/08/12 博客独享热度: 126 评论:

博主家电脑一直用的是一款 Breeze Contrast 鼠标指针样式，如今想着能不能把它一直到网站上呢？在查询了一些资料后发现网站更改鼠标指针样式跟在电脑上不太一样。电脑是一键安装，而网站则需要通过 CSS 选择器 根据网页元素的状态来更改鼠标指针样式！但是跟着博主一步一步设置，还是十分简单的！

博主使用了 Breeze Contrast 鼠标指针样式，效果如下：

网站鼠标指针样式部署

💬 Cursor-CSS指南

https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor)

下载压缩包

🗃️ 附件

Breeze Contrast 鼠标指针样式下载

https://haoranzing.lanzoul.com/iQfdS155iqde （密码：gem816）

将文件上传至网站

将下载下来的文件解压缩，再打开网站后台管理中的附件，将文件夹中的所有文件添加到附件中！

添加 CSS 代码

如果是 WordPress，那就是在 “自定义” - “额外 CSS” 后增添以下代码

如果是 Halo博客，那就是在 “设置” - “代码注入” - “全局 head 标签” 后增添以下代码

注意：代码中的路径需要更改，不能用我的，将刚刚复制的相对路径粘贴到相应位置！

例如：第三行代码需要 Arrow.cur，则在刚刚上传的附件中找到该文件，并复制其相对路径覆盖掉我的 /upload/Arrow.cur

cursor 中 url 参数指相应鼠标指针样式的图片的地址，第二个参数指当图片不生效时使用的鼠标指针类型

<style type="text/css">
body {
	cursor: url(/upload/Arrow.cur), default;
}
select{
	cursor: url(/upload/Hand.cur), pointer;
}
button,a:hover{
	cursor: url(/upload/Hand2.cur), pointer;
}
input{
	cursor:url(/upload/Help.cur), text;	
}
textarea,input:focus{
	cursor:url(/upload/IBeam.cur), text;	
}
code{
	cursor: url(/upload/Handwriting.cur), default;	
}
pre>code{
	cursor: url(/upload/Copy.cur), default;	
}
</style>

点击 保存 按钮，返回网站主页，按 F5 刷新页面，会发现鼠标指针样式已修改！

电脑桌面鼠标指针样式部署

首先仍然要下载鼠标指针的安装包，与上面网站部署的安装包一致！

下载压缩包

🗃️ 附件

Breeze Contrast 鼠标指针样式下载

https://haoranzing.lanzoul.com/iQfdS155iqde （密码：gem816）

安装部署

解压安装包后可以看到一个名叫 右键安装.inf 文件，单击 右键，点击 安装

如果使用的是 Windows11 系统，安装 按键有可能隐藏，此时需要点击最下面的按键展开全部按键，再点击 安装 即可！

在方案中选择刚刚下载的 Breeze Contrast，接着点击 应用,此时可能会出现一个弹窗，选择 确认 ，完成后点击 确定 即可！

以上！ 若有任何疑问，欢迎在评论区留言！