自定义鼠标样式
AI-摘要
切换
Tianli GPT
AI初始化中...
介绍自己
生成本文简介
推荐相关文章
前往主页
前往tianli博客
步骤
1.找到喜欢的鼠标图片
去阿里巴巴矢量库找找或者自行寻找
2.转换成`32px * 32px` 的 ico
或`cur`格式文件
[图片大小压缩工具](https://www.sojson.com/image/change.html)
[图片格式转换工具](https://www.aconvert.com/cn/icon/png-to-ico/)
备用网站:图片转 ico 图标 - 锤子在线工具
3.在halo设置中全局注入样式
附源代码<style>
/* 默认光标 */
*, body, .navbar, .content-wrapper {
cursor: url('/upload/DM_20241128161748_001_cropped_(1)_64x64.ico') 16 16, default !important;
}
/* 可点击元素光标 - 增加更多选择器并提高优先级 */
a, a *, /* 所有链接及其子元素 */
button, button *, /* 所有按钮及其子元素 */
.btn, .btn *, /* 按钮类及其子元素 */
[role="button"],
.post-link,
.menu-link,
.halo-comment *, /* 评论区所有元素 */
.post-title,
.post-title *,
.pagination *,
.social-link,
.post-tag,
.post-category,
.search-btn,
.navbar-item,
.button,
.menu-item,
.post-card,
.widget a,
.nav-link,
.nav-item,
input[type="button"],
input[type="submit"],
select,
.dropdown *, /* 下拉菜单所有元素 */
[class*="btn-"],
[class*="button"],
[onclick],
[data-toggle],
[data-target],
[data-dismiss] {
cursor: url('/upload/DM_20241128161748_001_cropped_64x64.ico') 16 16, pointer !important;
}
/* 确保悬停状态也有效 */
*:hover {
cursor: inherit;
}
</style>
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 程序员小刘
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果