Hexo|Butterfly修改鼠标指针样式
想要为博客设置自定义的可爱鼠标指针,先从网上找到鼠标指针的资源。
动态指针一般为ani或gif文件,静态指针为cur或ico文件。据说目前的浏览器已经不支持动态鼠标指针了,所以将找到的ani文件转为cur格式,转换教程。
在theme/source/css文件夹中创建自己的css文件,并在主目录下的_config.butterfly.yml文件中Inject下添加css文件路径。
在css文件中添加如下内容:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60/* 全局默认鼠标指针 */
body,
html {
cursor: url('./mouse/xxx.cur'),auto ;
}
/* 悬停图片时的鼠标指针 */
img {
cursor: url('./mouse/xxx.cur'), auto ;
}
/* 悬停图片弹出窗口时的鼠标指针 */
.fancybox__slide{
cursor: url('./mouse/xxx.cur'), auto ;
}
.carousel__slide{
cursor: url('./mouse/xxx.cur'), auto ;
}
/* 选择链接标签时的鼠标指针 */
a:hover,#site-name:hover {
cursor: url('./mouse/xxx.cur'), auto ;
}
/* 选择代码框展开和复制按钮时的鼠标指针 */
.copy-button:hover,.expand:hover {
cursor: url('./mouse/xxx.cur'), auto ;
}
/* 选中输入框时的鼠标指针 */
input:hover, textarea:hover {
cursor: url('./mouse/xxx.cur'), auto;
}
/* 悬停按钮时的鼠标指针 */
button:hover,.scroll-down-effects:hover {
cursor: url('./mouse/xxx.cur'), auto;
}
/* 悬停页脚链接标签(例如页脚徽标)时的鼠标指针 */
#footer-wrap a:hover {
cursor: url('./mouse/xxx.cur'), auto;
}
/* 悬停页码时的鼠标指针 */
#pagination .page-number:hover {
cursor: url('./mouse/xxx.cur'), auto;
}
/* 悬停菜单栏时的鼠标指针 */
#nav .site-page:hover {
cursor: url('./mouse/xxx.cur'), auto ;
}
/* 悬停滚动条的鼠标指针(只对Chrome有效) */
::-webkit-scrollbar:hover{
cursor: url('./mouse/xxx.cur'), auto ;
}
/* 悬停评论按钮的鼠标指针(我使用的是Gitalk/Valine) */
.switch-btn,.switch-btn:before,.gt-user-inner,.gt-ico,.gt-user-name,.gt-btn,.vbtn,svg,.at_button{
cursor: url('./mouse/xxx.cur'), auto ;
}
/* 悬停非链接文本时的鼠标指针 */
h1,h2,h3,h4,h5,h6,#subtitle,.content,.line,.post-content p,.post-content li{
cursor: url('./mouse/xxx.cur'), auto;
}
/* 悬停文章日期 */
.post-meta-date:hover,.post-meta-date-created:hover{
cursor: url('./mouse/xxx.cur'), auto ;
}
- 暂时不会修改的元素:iframe,FireFox滚动条,鼠标右击、加载时等样式。