萌娘百科同款隐藏鼠标悬浮黑幕

嘿!教你做个“黑幕说悄悄话”的效果

有时候吧,总有些话不想让人第一眼就看到,但又想留给好奇宝宝们去发现

比如下面这样:

(啊对对对,文章中无端端出现黑色的东西,是个猫?也会摸上去)

emmm就像上面一样,鼠标移上去它就现身了!是不是很神奇?

咱这就来唠唠怎么搞~


1. CSS 部分

把下面的代码扔到:后台 → 外观 → 自定义 → 额外CSS 里就行。其他博客系统如果有“附加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;
}

如果你是其他博客模板,就按人家的方式加~
要是完全自己撸的网站……那你就放你该放 CSS 的地方呗

(md,完全自己设计的网站,不知道什么是CSS放在哪里?我不信)

(还有你,连HTML和CSS都不会,你还做什么网站)


2. HTML 部分

下面轮到 HTML 小零件登场~

<span class="heimu" title="你知道的太多了">这是隐藏的文字</span>
  • title:就是你鼠标悬停时蹦出来的小提示
  • “这是隐藏的文字”:换成你自己想说但不想让人一眼看到的大实话

(不要告诉我你还是不会)

(什么,你问我能不能搞其他颜色,不要黑色?但凡知道CSS是什么东西的人都会改,别告诉我你真的不知道)

(你是CSS大佬,要入侵我的网站????来来来来,用你的CSS编写一个软件来入侵我的网站)


参考文献(虽然我觉得上面已经够清楚了):
如何实现黑幕?即鼠标触及之地,原来黑色显示原来文字 - 腾讯云开发者社区


快去试试叭!让你的文章也多点神秘小彩蛋~

©版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 共1条

请登录后发表评论

    • fghdlz的头像-灵梦岛fghdlz作者1