专栏首页细嗅蔷薇如何实现黑幕?即鼠标触及之地,原来黑色显示原来文字

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

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

想起之前在找随机背景图片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:萌娘百科上的黑幕

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为爱心助力!替换网站的404为宝贝回家把404页面利用起来!

    腾讯在很之前开放了宝贝回家的404页面接口,意味着任何404的网页都可以改为宝贝回家。

    lollipop72
  • 微信小程序一行文字水平居中

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

    lollipop72
  • MarkDown空格缩进与首行缩进

    一般来说,使用markdown编辑时我们手打空格缩进是不起效果的,因此我们需要通过使用HTML中的空格实体来帮助我们实现缩进效果。

    lollipop72
  • 设计图都不会画,还想做”架构师“?

    什么是系统架构师? 系统架构师是一个既需要掌控整体又需要洞悉局部瓶颈并依据具体的业务场景给出解决方案的团队领导型人物。一个架构师得需要足够的想像力,能把各种目标...

    互扯程序
  • Faker Providers使用及自定义开发

    前面两篇文章,一篇介绍了利用Python原生生成测试数据基于Python生成中文测试数据,一篇介绍了Faker库生成测试数据基于Faker生成中文测试数据实例,...

    苦叶子
  • linux下安装php的imagick扩展模块(附php升级脚本)

    imagick是一个PHP的扩展,是一套软件系列,用ImageMagick提供的API来进行图片的创建与修改,不过这些操作已经包装到扩展imagick中去了,最...

    洗尽了浮华
  • 元旦快乐 – 使用snow.js增加下雪效果

    杨逸轩
  • 使用MyBatis 框架犯的错误

    values后面的值是相应类对应的属性值,还可以对这些属性指定jdbcType :

    chaplinthink
  • 关于dubbo创建服务和引用服务时,会报错:cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration ca

      在跟着做淘淘商城项目时,用到了dubbo,作为一个SOA架构的项目,分为表现层与服务层,自然地,为了各个层之间解耦合(或者最大限度地松耦合),我们使用了du...

    黑泽君
  • mybatis 针对SQL Server 的 主键id生成策略

    SQL Server中命令: select newId()  ,可以得到SQL server数据库原生的UUID值,因此我们可以将这条指令写到 Mybatis的...

    庞小明

扫码关注云+社区

领取腾讯云代金券