知更鸟主题自定义鼠标指针样式

kktoo
kktoo
kktoo
17
文章
1
评论
2020年1月5日23:29:35 评论 184 807字阅读2分41秒

知更鸟主题自定义鼠标指针样式

在如今的时代,彰显个性的理念早已深入人心,本文将展示如何改变默认鼠标指针样式成我们自定义的样式,很多网站都有这样的功能,本站的鼠标样式,就是一个胡萝卜\(^o^)/~。

有兴趣的朋友来试试。具体步骤如下:

准备鼠标样式文件

鼠标样式文件一般都是扩展名为*.cur的文件。可以去网络上下载成品,有很多丰富资源的网站。

如果找不到满足的,就自力更生做一个,选一张喜欢的图片,就可以将其做成一个cur文件,制作方法请使用搜索引擎搜索“cur制作”,有很多在线的免费工具。

上传鼠标样式文件

上传鼠标样式文件到网站指定目录,需要能够以url形式访问,可以自己在地址栏中输入url进行测试。

比如将normal.cur文件保存在 wwwroot/cursor目录下,那么我们的指针文件路径为http://xxx.com/cursor/normal.cur

修改css代码

如果是知更鸟主题:

登陆后台 → 外观 → 主题选项 → 定制风格,在“自定义样式”中,把下面的css代码添加进去,然后保存。

注意:用自己的cur文件url地址替换示例代码中的url地址


/** 鼠标样式 开始**/
/** 普通指针样式**/
body {
cursor: url(http://www.xxx.com/cursor/normal.cur), default;
}

/** 链接指针样式**/
a:hover{
cursor:url(https://www.xxx.com/cursor/link.cur), pointer;
}

/** 鼠标样式 结束**/

如果是其他主题:

找到当前生效主题使用的style.css样式表。比如:wwwroot/wp-content/themes/twentynineteen/style.css,当然有些主题使用的样式表路径和文件名可能会有差异,比如有些主题的样式表就是css/style_o.css。

对样式表修改,代码与上面的示例相同。

现在访问网站,应该就可以看到效果啦

继续阅读
kktoo
  • 文本由 发表于 2020年1月5日23:29:35
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: