hexo自定义鼠标指针样式
kai (¬‿¬)

建站和美化汇总

效果:

实现思路

1.通过css代码设置指针图片

1
2
3
4
5
6
body {
cursor: url(https://cdn.jsdelivr.net/gh/kaix2301/pictures/img202201071208706.cur), auto;
}
a {
cursor: url(https://cdn.jsdelivr.net/gh/kaix2301/pictures/img202201071205091.cur), auto!important;
}

2.注意

不同主题代码一样,但何处添加此代码,何处引用有所不同。

一般在Hexo\themes\主题名\source\css中,或者此文件夹的子文件夹中。

需要创建新文件添加代码,或者在已有文件中添加代码。

实现方式

在上述css文件夹中,看到下面红色箭头所指内容。

文件夹中存着许多样式文件,在stytle.styl中引用了所有样式文件。

image-20220107132314632

然后照猫画虎,创建my文件夹用来存放自己的样式文件。

在其中创建mouse.styl文件存入上面的代码(因为其他样式文件都是styl文件,所以自己也用styl)。

stytle.styl中添加一条来引用此样式。

image-20220107132942451

最后保存,依次执行下面指令,查看效果,已经设置成功。

1
2
3
hexo clean
hexo g
hexo s

其他思路

参考此文章:添加js文件并引用,此方法逻辑上应该是可行的,而且比较万能。

  • 本文标题:hexo自定义鼠标指针样式
  • 本文作者:kai
  • 创建时间:2022-01-07 13:09:49
  • 本文链接:https://kainote.top/2022/01/07/hexo自定义鼠标指针样式/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
 评论