如何仅用CSS/HTML实现单个日语词假名与汉字的点击切换显示？

可以只用CSS和HTML实现单个单词的独立切换，不需要JavaScript，也不用给每个单词设置唯一ID或类名。核心思路是利用CSS的:checked伪类和相邻兄弟选择器，配合隐藏的复选框来实现状态切换，每个单词组完全独立，批量生成时也无需额外处理。

实现代码 #

CSS

/* 隐藏用于控制状态的复选框 */
.toggle-checkbox {
  display: none;
}

/* 默认状态：显示假名，隐藏汉字 */
.word-toggle x {
  display: none;
}
.word-toggle y {
  font-weight: bold;
}

/* 复选框选中时：显示汉字，隐藏假名 */
.toggle-checkbox:checked + .word-toggle x {
  display: inline;
  font-weight: bold;
}
.toggle-checkbox:checked + .word-toggle y {
  display: none;
}

HTML

<input type="checkbox" class="toggle-checkbox" id="word1">
<label class="word-toggle" for="word1">
  <x>故郷</x><y>こきょう</y>
</label>に手紙を出す write home to one's family

<br><br>

<input type="checkbox" class="toggle-checkbox" id="word2">
<label class="word-toggle" for="word2">
  <x>東京</x><y>とうきょう</y>
</label>に住んでいます I live in Tokyo

工作原理 #

1. 每个需要切换的单词组对应一个隐藏的<input type="checkbox">和关联的<label>，label的for属性和复选框的id绑定（批量生成时只需保证id唯一即可，比如用递增数字，这比给每个单词加唯一类名简单得多）。
2. 默认状态下，复选框未选中，CSS控制显示假名(y)、隐藏汉字(x)。
3. 点击label内的假名或汉字时，会触发复选框的选中状态切换，CSS通过:checked伪类选中对应的单词组，切换x和y的显示状态。
4. 每个单词组的状态完全独立，不会影响页面上的其他单词。

批量生成优化提示 #

如果页面有大量单词，手动写id可以用简单的递增规则（比如word1、word2、word3...），或者用模板引擎生成页面时自动生成唯一id，避免手动重复劳动。

内容的提问来源于stack exchange，提问作者Alex