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

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

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

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

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://wnag.com.cn复制
如有侵权,请联系 yunjia_community@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 做了七年前端开发,我最近才意识到可访问性的必要......

    作为一名 7 年多的前端开发者,我从未想过我的工作需要具有可访问性,直到最近才领悟。

    深度学习与Python
  • HTML5点击全屏的方法

    这个按钮是?我移了好几遍,没有title提示。图形也不具有代表性,一个圈圈意思是?——圈人??是不是啊??不敢点,点了不知道会发生什么,浏览器会不会关掉!!我思...

    javascript.shop
  • 从零开始学习PYTHON3讲义(十五)让画面动起来

    虽然看起来绘图和音乐并不相关,但是听过了上一讲的内容你一定知道,这是游戏编程中四个需要处理内容的两部分,这两部分必须同时、并行的处理,不能因为某一项计算的拖延,...

    俺踏月色而来
  • 【CSS】515- 如何通过CSS向JS传参的

    CSS中有很多媒体查询的用法,例如设备尺寸判别,是否支持鼠标行为,是否是黑暗模式,是否是省电模式等。

    pingan8787
  • 为什么黑客从不用鼠标,一直在敲键盘?看完长见识了~

    5. 只需要敲入“读出秘密文件”(“Access The Secret Files”),计算机就会给出任何你想要的信息。

    Python知识大全
  • 软件分享 | ZoomIt 4.5 演示辅助工具使用教程

    ZoomIt是一款非常实用的投影演示辅助软件。它源自Sysinternals公司,后来此公司被微软收购,因此,有些网友也称ZoomIt为微软放大镜。ZoomIt...

    课代表
  • Python 0基础开发游戏:打地鼠(详细教程)VS code版本

    1 下载安装 python 2 下载安装VS code编辑器 安装时,要注意勾选 添加到path

    用户2966292
  • 走近科学:如何搞定各种各样的终端机

    特别声明:本文提供一些绕过终端机的方法,仅用于安全学习及教学用图,禁止非法利用。本文旨在提高市面上终端机的安全性,避免其遭到恶意破坏。 定场诗 妖都地铁售票终端...

    FB客服
  • 应用|两个辅助Windows下演讲的工具

    近两年的疫情,导致大部分项目都在远程交付,给客户做presentation和workshop也都搬到了线上,在演讲过程中高亮鼠标,画图做批注补充等等都有了很大的...

    琉璃康康
  • 移动端web开发笔记

    这是一个最好的时代,因为我们站在潮流中;但也是一个最坏的时代,因为我们站在潮头上。 META相关

    李维亮
  • photoshop学习笔记

    窗口——工作区——复位基本功能:让软件界面恢复到默认的标准状态 所有的控制面板都在窗口菜单中,可以对其进行隐藏和显示 按下TAB键可以隐藏或显示工具箱,属性栏,...

    HUC思梦
  • 用 Python 开发实用程序 – 计算器

    一段时间前,自己制作了一个库 “sui-math”。这其实是 math 的翻版。做完后,我又想到,python 既然可以轻易的完成任何的数学计算,何不用 pyt...

    数据森麟
  • 第123天:移动web开发中的常见问题

    准备编辑这段时发现简书上已经有作者写了关于rem布局的介绍,并且他的设置比我所用的更加简洁,贴上地址供大家学习参考。 手机端页面自适应解决方案—rem布局进阶...

    半指温柔乐
  • 手写原生代码专题 | 图片拖拽效果(一)

    前端的小伙伴们,我想大多数都是颜值控吧,看到一个漂亮或新奇的效果,都想搞明白是怎么实现的吧。但是前端发展的实在太快,各种框架和组件五花八门,由于项目业务时间的问...

    前端达人
  • [python opencv 计算机视觉零基础到实战] 十八、用鼠标进行画画

    putText方法接收图像,文字内容, 坐标 ,字体,大小,颜色,字体厚度这几个参数,我们用中文的函数原型说明如下:

    1_bit
  • 极客DIY:简易安装魔镜大合集,总有一款适合你

    智能镜子已经不再是什么新鲜的事情了,但接下来介绍的“魔镜”成本比过去同期的项目作品要低的很多,同时安装起来也轻松的很多,如果你对这类项目感兴趣,那么就开始阅读本...

    FB客服
  • 5分钟教你制作.9图片

    之前项目中有用到.9图片,因精力有限,一直没有去尝试着弄过。如今因公司发展问题集体裁员,赋闲在家,便抽空简单地了解了一下.9图片的使用,作文如下,以做积累。

    代码咖啡

扫码关注云+社区

领取腾讯云代金券