最近闲的没事想写点东西，突然想起萌娘百科的黑幕效果，很有意思，遂决定复刻

虽然说了要自己写，但还是搜一下，懒癌晚期了属于是一眼就看到了 Vanilla-chan 大佬的这篇文章，然而这显然不是 Hexo 的教程，改改又不是不能用所以我们把它变成 Hexo 的形状

开始

这是大佬给出的 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.heimu, .heimu a, a .heimu, .heimu a.new {
    background-color: #252525;
    color: #252525;
    text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
    color: white !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu {
     color: lightblue !important;
}
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu {
    color: #BA0000 !important;
}
/*阅读更多：https://zh.moegirl.org/MediaWiki:Mobile.css 本文引自萌娘百科(https://zh.moegirl.org)，文字内容默认使用《知识共享 署名-非商业性使用-相同方式共享 3.0》协议。*/

我使用的主题是 Butterfly ，所以我们以 Butterfly 为例。我选择直接修改主题文件

找到主题目录butterfly/source/css/_global下的文件index.styl，追加

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
.heimu,
.heimu a,
a .heimu,
.heimu a.new,
.heimu
  background-color: #000000 !important
  color: #000000 !important
  transition: color 0.13s linear
  text-shadow: none

.heimu:hover,
.heimu:active,
.heimu:hover .heimu,
.heimu:active .heimu
  color: white !important

.heimu:hover a,
a:hover .heimu,
.heimu:active a,
a:active .heimu
  color: lightblue !important

.heimu:hover .new,
.heimu .new:hover,
.new:hover .heimu,
.heimu:active .new,
.heimu .new:active,
.new:active .heimu
  color: #BA0000 !important

styl 注重缩进，所以请在修改完后反复检查

最后，把你想要遮挡的话用 <span> 标签包裹起来，就像这样 <span title="你知道的太多了" class="heimu">你要遮挡的话</span>

以上。