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

可定

发布于 2020-05-07 14:45:27

2.6K0

发布于 2020-05-07 14:45:27

文章被收录于专栏：细嗅蔷薇

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

想起之前在找随机背景图片API时，有个博主实现了类似的功能实现效果如下图：

默认下

鼠标靠近时

后台查看源代码，发现是以下这段代码起了作用。

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

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：萌娘百科上的黑幕

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css

api

腾讯云开发者社区

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

api

腾讯云开发者社区

登录后参与评论

0 条评论

热度

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

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

CSS

HTML

参考

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐