使用CSS实现隐藏汉字黑框

,

本文参考ChatGPT的回答整理 (￣y▽,￣)╭

在基于Hexo创建的个人博客当中管理CSS文件

1.修改通用的styl文件

  在/themes/your-theme-name/source/css/目录下有多个styl文件，这些文件通常是由Stylus编写的CSS预处理器文件，最终生成的CSS文件将用于渲染你的网站
  如果你希望在所有页面中使用这个效果，你可以修改主题的CSS文件，将上面的CSS代码添加到其中任意一个CSS文件即可。通常，你应该将代码添加到主题的style.styl文件中，因为它是所有CSS文件的入口文件，可以确保你的代码能够被正确地应用到整个网站中。但是，你也可以根据需要选择其他的CSS文件进行修改

2.创建单独的css文件

  如果你只想针对某个页面或者某个特定的Markdown文件添加黑色方块隐藏文字的效果，你可以在该Markdown文件的Front-matter区块中指定一个单独的CSS文件。
  例如，在你的Markdown文件中添加如下Front-matter：

1
2
3
4
5
6
---
title: My blog post
date: 2023-03-18
tags: [Hexo, CSS]
css: /css/my-custom.css
---

  在这个例子中，我们指定了一个名为my-custom.css的CSS文件，它应该位于你的主题CSS文件夹中（通常是/themes/your-theme-name/source/css/目录下）。
  然后，你可以在my-custom.css文件中添加你希望加入的CSS代码

HTML span 的使用

HTML的<span>元素用于为文本或其他元素添加样式，而不影响布局。具体来说，<span>元素只是一个用于包装文本的容器，可以在其中添加样式或应用其他属性，例如id或class
以下是<span>元素的示例用法：

  1. 将一段文本标记为特定样式

    1
    <p>这是一段<span class="highlighted-text">突出显示的文本</span>。</p>

    在上面的示例中，<span>元素被用来将文本标记为"highlighted-text"类，以便可以在CSS中定义该类的样式。

  2. 应用多个属性

    1
    <span id="username" class="red bold">John</span>

    在上面的示例中，<span>元素被用于显示用户的用户名，并应用了id和class属性，以便可以通过CSS或JavaScript针对该元素进行样式或操作。

总之，<span>元素是一个非常常用的HTML元素，用于添加样式或其他属性，而不会影响文档的结构或布局。

从萌娘百科”借“一点代码

通过浏览器的“检查”功能查看网页的 CSS 代码

以Mozilla Firefox为例：

  • 打开网页并右键单击需要查看的元素。
  • 从弹出菜单中选择“检查元素”（或按 Ctrl+Shift+C 快捷键）。
  • 在打开的开发者工具窗口中，选择“Inspector”选项卡。
  • 在 HTML 标记中选择需要查看的元素。
  • 在右侧面板中选择“Styles”选项卡。
  • 在样式列表中找到需要查看的 CSS 规则。

代码实现

参照前述管理CSS文件的方法：
在/themes/your-theme-name/source/css/目录下的style.styl文件中，插入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.heimu,
.heimu rt {
 background-color:#252525;
}
.heimu,
.heimu a,
a .heimu,
a.new .heimu,
span.heimu a.new,
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited,
span.heimu a.mw-disambig,
span.heimu a.mw-redirect {
 transition:color 0.13s linear;
 color:#252525;
 text-shadow:none
}
span.heimu:hover,
span.heimu:active {
 color:white
}
span.heimu:hover a,
a:hover span.heimu {
 color:lightblue
}
span.heimu:hover a:visited,
a:visited:hover span.heimu {
 color:#C5CAE9
}
span.heimu:hover a.new,
a.new:hover span.heimu {
 color:#FCC
}
span.heimu a.new:hover:visited,
a.new:hover:visited span.heimu {
 color:#EF9A9A
}
span.heimu:hover a.extiw:visited,
a.extiw:visited:hover span.heimu {
 color:#D1C4E9
}

对于要隐藏的元素，在markdown文件中，使用：

1
<span title="你知道的太多了" class="heimu">要隐藏的文字</span>

效果如下：
要隐藏的文字

完成

ChatGPT的其它回答

方法一

在你想要隐藏部分文字的位置上添加一个容器，例如：

1
2
3
4
<div class="hide-text">
  <p>这是要隐藏的文字</p>
  <div class="overlay"></div>
</div>

然后，在CSS文件中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.hide-text {
  position: relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.hide-text:hover .overlay {
  opacity: 0;
}

实现效果：

这是要隐藏的文字

方法二

你可以使用 <span> 标签来定义一个区域，并使用 data 属性来存储其他字符元素的内容，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<span data-text="汉字">████████</span>。

<!-- 显示其他字符元素的元素 -->
<div id="hover-text" style="display: none;"></div>

<script>
  // 获取字符元素和显示其他字符的元素
  const element = document.querySelector('span[data-text]');
  const textElement = document.querySelector('#hover-text');

  // 监听鼠标移动事件
  element.addEventListener('mouseover', () => {
    // 获取存储的字符内容并设置显示元素的内容
    const text = element.getAttribute('data-text');
    textElement.innerHTML = text;

    // 显示其他字符元素的元素
    textElement.style.display = 'block';
  });

  // 监听鼠标移开事件
  element.addEventListener('mouseout', () => {
    // 隐藏其他字符元素的元素
    textElement.style.display = 'none';
  });
</script>

在上面的示例代码中，我们在 Markdown 文件中使用了一个 <span> 标签来定义一个区域，并使用 data-text 属性来存储其他字符元素的内容

实现效果：

████████。