好！我现在一次性把所有 5 种效果全部整合进一个 extra.css，你直接复制覆盖即可，以后在 md 里想用哪种就用哪种，全部共存、互不冲突。

我包含的效果： 1. 纯黑幕遮挡（你最想要的） 2. 整行黑幕 3. 萌娘模糊黑幕 4. 行内悬浮小提示（之前的小字 hover） 5. 整块悬浮展开框（之前的区块 hover）

一、直接复制到 `extra.css`（完整整合版）

打开 docs/stylesheets/extra.css，全部替换成这段：

/* ============================================== */
/* MkDocs 全站通用 5 种隐藏/悬浮效果整合版 */
/* ============================================== */

/* 1. 纯黑幕遮挡（默认涂黑，悬浮显示文字） */
.blackout {
  background-color: #000 !important;
  color: #000 !important;
  padding: 0 4px;
  border-radius: 2px;
  transition: all 0.2s ease;
}
.blackout:hover {
  background-color: transparent !important;
  color: inherit !important;
}

/* 2. 整行黑幕 */
.blackout-line {
  background-color: #000 !important;
  color: #000 !important;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  transition: all 0.2s ease;
}
.blackout-line:hover {
  background-color: transparent !important;
  color: inherit !important;
}

/* 3. 萌娘百科模糊黑幕 */
.spoiler-blur {
  background: #1a1a1a;
  color: transparent;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
  padding: 0 5px;
  border-radius: 3px;
  transition: all 0.2s ease;
  cursor: help;
}
.spoiler-blur:hover {
  background: transparent;
  color: inherit;
  text-shadow: none;
}

/* 4. 行内悬浮小提示（鼠标移上去弹出小字） */
.hover-tip {
  border-bottom: 1px dashed #888;
  cursor: help;
  color: #555;
}
.hover-tip .hover-content {
  display: none;
  background: #f8f9fa;
  padding: 4px 8px;
  border-radius: 4px;
  margin-left: 6px;
  color: #000;
  white-space: nowrap;
}
.hover-tip:hover .hover-content {
  display: inline-block !important;
}

/* 5. 整块悬浮展开框（鼠标移上去展开内容） */
.hover-block {
  padding: 10px 14px;
  background: #f7f7f7;
  border-radius: 6px;
  cursor: pointer;
  margin: 1em 0;
}
.hover-block .hover-block-content {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}
.hover-block:hover .hover-block-content {
  display: block !important;
}

保存即可。

二、mkdocs.yml 必须有这行（确保已加）

extra_css:
  - stylesheets/extra.css

三、在 .md 里怎么用？（每种一句用法示例）

你直接复制下面任意一句到文章里就能用！

1. 纯黑幕（你最想要的）

正常文字 <span class="blackout">隐藏内容</span> 正常文字

2. 整行黑幕

<span class="blackout-line">这一整行都会被涂黑，悬浮显示</span>

3. 萌娘模糊黑幕

正常文字 <span class="spoiler-blur">模糊隐藏，悬浮变清晰</span> 正常文字

4. 行内悬浮小提示

<span class="hover-tip">鼠标移到这里<span class="hover-content">弹出的提示内容</span></span>

5. 整块悬浮展开框

<div class="hover-block">
  鼠标悬浮展开
  <div class="hover-block-content">
    这里是隐藏的整块内容
  </div>
</div>

四、效果速查（你一眼就知道用哪个）

类名	效果
`.blackout`	黑块盖住，悬浮显示文字
`.blackout-line`	整行涂黑
`.spoiler-blur`	萌娘百科模糊阴影
`.hover-tip`	虚线小字，悬浮弹出提示
`.hover-block`	灰色块，悬浮展开内容

五、最后一步

重启预览：

mkdocs serve

刷新页面 → 5 种效果全部可用！

需要我再给你做暗色模式自动适配吗？

一、直接复制到 extra.css（完整整合版）