如何实现黑幕？即鼠标触及之地，原来黑色显示原来文字
最近在写文章时，有些比较敏感的句段想实现默认情况下黑色（遮住文字），而鼠标靠近之后显示出来这些敏感句段的功能。
想起之前在找随机背景图片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>参考
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录