我需要两个 HTML 标签，以便一个在另一个隐藏时可见，反之亦然

Question

我正在创建一个学习日语单词的页面。每个单词都在像这样的句子中上下文化。

故郷に手纸を出す给家人写信

我这样做是为了只能看到这个词的拼音，这样人们就可以训练用表意文字写这个词。上面的句子看起来像这样。

こきょうに手纸を出す给家人写信

现在我希望能够点击こきょう来隐藏こきょう并显示故郷，反之亦然。这是我到目前为止编写的 CSS 和 HTML。

CSS

x { display: none; }

HTML

<x>故郷</x><y>こきょう</y>に手紙を出す write home to one's family

如果我点击这个词，我基本上想在

y { display: none; }

和

x { display: none; }

之间切换。

我可以纯粹使用 CSS 和 HTML 来实现这一点吗？还是需要 Javascript？

如果我在页面上隐藏所有

<x>

或

<y>

，我认为在两者之间切换并不困难，但我不喜欢这个结果。我正在寻找一种仅在单击的单词的

<x>

或

<y>

之间切换的方法。

由于页面上有数百/数千个句子，因此为每个单词使用不同的 ID 或类来定位特定单词是不切实际的。

我发现的所有解决方案都涉及使用特定标签的 ID，或同时切换所有标签，但我不知道如何实现这一点。

Answer 1

您熟悉复选框黑客吗？这可以通过一个单选按钮和标签内的两个单词上下文来非常简单地完成。像这样：

[type=checkbox]:checked+span {
  display:none;
}
[type=checkbox]:not(:checked)+span+span {
  display:none;
}
[type=checkbox] {
  display:none;
}

  <label>
    <input type=checkbox>
    <span>故郷</span>
    <span>こきょう</span>
  </label>に手紙を出す write home to one's family