制作一个简单的背题小笔记

在学习或者备考中遇到的难题可以记录在Obsidian笔记中方便复习刷题,但是怕在刷题过程中直接看到答案比较难以达到背题效果。
所以可以使用简单的html和css样式达到鼠标放置后再显示答案的效果
Obsidian_ASQX9yBKOi

4 个赞

在笔记中添加一个并且添加一个css样式,样式名为abc
1664704284806
在Obsidian设置>外观>CSS代码片段>打开代码段文件夹,在其中创建一个.css文件
在文件中写入
.abc{
opacity:0;
}

.abc:hover{
opacity:1;
}
意思为默认情况下透明度为0,鼠标放置后透明度为1

设置好后效果为:
Obsidian_rj269n5I1V

不考虑迁移问题的话,也可以使用callout blocks,不过要多点一次

> [!example]- title
> content

115chrome_ZY9S4SLmut

需要隐藏的内容够短的话, ob 还支持一个语法:

*~~隐藏内容~~*

Obsidian_I2dFMNvITz

6 个赞

好像只有 Blue Topaz 支持

之前有扒过这个,但是不会css,也不知道对不对。

body {
  --cloze-bg-color-3: transparent;
}

body:not(.remove-cloze-style) :is(.markdown-preview-view,
.markdown-rendered) em > mark > del:active,
:is(.markdown-preview-view,
.markdown-rendered).cloze em > mark > del:active {
  color: var(--accent-strong);
  background-color: transparent;
  transition: all 400ms ease-in-out;
}

body:not(.remove-cloze-style) .cm-s-obsidian .cm-em.cm-formatting.cm-formatting-em.cm-em.cm-formatting.cm-formatting-em~.cm-em.cm-formatting.cm-formatting-highlight.cm-highlight~.cm-em.cm-formatting.cm-formatting-strikethrough.cm-highlight.cm-strikethrough{
  background-color: transparent !important;
}

body:not(.remove-cloze-style) :is(.markdown-preview-view,
.markdown-rendered) em > del:hover,
:is(.markdown-preview-view,
.markdown-rendered).cloze em > del:hover {
  background-color: transparent;
  color: var(--text-normal);
  transition: all 400ms ease-in-out;
}

body:not(.remove-cloze-style) .markdown-source-view.is-live-preview .cm-em.cm-strikethrough,
.markdown-source-view.is-live-preview.cloze .cm-em.cm-strikethrough {
  background-color: var(--cloze-bg-color-3);
  color: var(--cloze-bg-color-3);
  font-style: normal;
  text-decoration: underline var(--cloze-decoration-3) var(--cloze-decoration-color-3);
}

body:not(.remove-cloze-style) .markdown-source-view.is-live-preview .cm-em.cm-strikethrough:hover,
.markdown-source-view.is-live-preview.cloze .cm-em.cm-strikethrough:hover {
  background-color: transparent !important;
  color: var(--text-normal) !important;
  transition: all 400ms ease-in-out;
}

body:not(.remove-cloze-style) .cm-em.cm-formatting.cm-formatting-em~.cm-em.cm-formatting.cm-formatting-strikethrough.cm-strikethrough,
.markdown-source-view.cloze .cm-em.cm-formatting.cm-formatting-em~.cm-em.cm-formatting.cm-formatting-strikethrough.cm-strikethrough {
  color: var(--accent-strong);
  text-decoration: none;
}
body:not(.remove-cloze-style) .cm-em.cm-formatting.cm-formatting-em~.cm-em.cm-formatting.cm-formatting-strikethrough.cm-strikethrough~span.cm-em.cm-strikethrough:not([class*="formatting"]),
.markdown-source-view.cloze .cm-em.cm-formatting.cm-formatting-em~.cm-em.cm-formatting.cm-formatting-strikethrough.cm-strikethrough~span.cm-em.cm-strikethrough:not([class*="formatting"]) {
  color: var(--accent-strong);
}