通过 css 的 checkbox hack 技术，无需 javascript 即可为每个日语词汇独立实现“点击切换显示汉字/假名”的交互效果，适用于含数百上千例句的大规模学习页面。
通过 css 的 checkbox hack 技术，无需 javascript 即可为每个日语词汇独立实现“点击切换显示汉字/假名”的交互效果，适用于含数百上千例句的大规模学习页面。
在日语词汇学习页面中，常需让用户先遮蔽汉字、仅显示假名（如 こきょう）以训练书写能力；点击后则隐藏假名、显示对应汉字（如 故郷），形成可交互的双态提示。关键挑战在于：每个词对需独立控制，且不能依赖唯一 ID 或 JS 逻辑——尤其当页面包含成百上千个例句时，可维护性与性能至关重要。
幸运的是，纯 HTML + CSS 即可优雅解决。核心方案是 checkbox hack：利用 <input type="checkbox"> 的 :checked 状态作为样式切换开关，并借助相邻兄弟选择器（+）精准定位同一组内的两个 <span></span> 元素。
以下是完整、可复用的实现：
<label class="japanese-toggle"> <input type="checkbox"><span class="kanji">故郷</span> <span class="kana">こきょう</span> </label>に手紙を出す write home to one's family
配套 CSS（推荐添加 .japanese-toggle 类提升可维护性）：
.japanese-toggle input {
display: none; /* 隐藏复选框本身 */
}
.japanese-toggle input:checked + .kanji {
display: none; /* 选中时隐藏汉字 */
}
.japanese-toggle input:not(:checked) + .kanji + .kana {
display: none; /* 未选中时隐藏假名 */
}
✅ 优势说明：
- ✅ 完全独立：每个
<label></label>封装一组词对，点击互不影响； - ✅ 零 JS：不依赖任何脚本，加载快、兼容性好（支持所有现代浏览器及 IE9+）；
- ✅ 语义清晰：
<label></label>天然支持点击聚焦，无障碍友好； - ✅ 易于扩展：可统一添加过渡动画（如
transition: opacity 0.2s）或 hover 效果。
⚠️ 注意事项：
- 请确保 HTML 结构严格遵循
input → .kanji → .kana顺序，CSS 选择器依赖此 DOM 流； - 若需默认显示假名（推荐学习场景），无需额外设置——因初始状态为
:not(:checked)，.kana自动隐藏； - 避免在
<label></label>内嵌套其他交互元素（如链接、按钮），以免事件冲突。
该方案将交互逻辑完全交由浏览器渲染引擎处理，既轻量又可靠，是静态词汇卡片页的理想选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
