如何实现黑幕?即鼠标触及之地,原来黑色显示原来文字

发布于 2020-05-01  245 次阅读


最近在写文章时,有些比较敏感的句段想实现默认情况下黑色(遮住文字),而鼠标靠近之后显示出来这些敏感句段的功能。

想起之前在找随机背景图片API时,有个博主实现了类似的功能,也就是这篇文章:岁月小筑随机图片API上线了,目前公测中

实现效果如下图:

默认下
20200429215315.png

鼠标靠近时
20200429215325.png

后台查看源代码,发现是以下这段代码起了作用。
20200429215354.png

将上面这段代码直接复制到文章后发现无效,并没有所谓的黑幕出现,因此把这段代码直接网上找了以下,发现有如下解决方案:
20200429215419.png

CSS

将下列代码放置于WordPress后台 - 外观 - 自定义 - 额外CSS中

.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;
}

HTML

在文章中你想插入的“黑幕”之前加上

<span class="heimu" title="你知道的太多了">

在你想要加黑幕的话之后加上

</span>

示例:

<span class="heimu" title="你知道的太多了">找到我就和你嘿嘿嘿</span>

参考

岁月小筑随机图片API上线了,目前公测中

Re:萌娘百科上的黑幕

本文标题:《如何实现黑幕?即鼠标触及之地,原来黑色显示原来文字》

本文链接:https://wnag.com.cn/1315.html

特别声明:除特别标注,本站文章均为原创,本站文章原则上禁止转载,如确实要转载,请电联:wangyeuuu@qq.com,尊重他人劳动成果,谢过~


正因为有要好好实现的梦想,所以今天也要好好加油。