ruby标签本身不支持点击触发拼音显示，必须配合javascript控制rt显隐；核心是用css切换visibility与opacity，添加role="button"和tabindex实现无障碍，伪元素扩展移动端点击热区，多音字通过data-pinyin动态切换。
ruby 标签本身不支持点击触发拼音显示
直接用 <ruby></ruby> + <rt></rt> 只能静态展示拼音，浏览器默认不会响应点击、悬停或键盘操作。想实现“点一下显示/隐藏拼音”的效果，必须配合 JavaScript 控制 rt 的显隐状态，不能只靠 HTML 语义。
用 CSS + JS 实现可点击的拼音点读
核心思路是：初始隐藏 <rt></rt>，点击 <rb></rb>（或整个 <ruby></ruby>）时切换其 visibility 或 opacity。注意几个关键点：
-
<rt></rt>默认是行内元素，且部分浏览器会强制设置font-size: 50%和line-height，建议显式重置样式 - 避免用
display: none切换，否则屏幕阅读器可能跳过拼音；推荐用visibility: hidden+opacity: 0 - 为无障碍考虑，给
<ruby></ruby>加role="button"和tabindex="0"，支持键盘聚焦和回车触发
<ruby class="pinyin-toggle" role="button" tabindex="0"><rb>汉</rb><rt>hàn</rt></ruby><style>
ruby.pinyin-toggle rt {
visibility: hidden;
opacity: 0;
transition: opacity 0.15s, visibility 0.15s;
}
ruby.pinyin-toggle.show-rt rt {
visibility: visible;
opacity: 1;
}
</style><script>
document.querySelectorAll('ruby.pinyin-toggle').forEach(ruby => {
const rt = ruby.querySelector('rt');
if (!rt) return;
const toggle = () => ruby.classList.toggle('show-rt');
ruby.addEventListener('click', toggle);
ruby.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); }
});
});
</script>
移动端点击区域太小，需要扩大热区
手机上手指点击 <rb></rb> 文字容易误触或点不中。解决方法不是加 padding（会撑开 ruby 布局），而是用伪元素覆盖扩展点击范围：
- 给
<ruby></ruby>设置position: relative - 用
::after伪元素撑出 44×44px 最小可点区域，透明但可响应事件 - 确保伪元素 z-index 高于文字，且 pointer-events: auto
ruby.pinyin-toggle {
position: relative;
}
ruby.pinyin-toggle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
pointer-events: auto;
}
多音字场景下 rt 内容需动态切换
一个汉字对应多个读音时，不能只写死一个 <rt></rt>。常见做法是把所有候选拼音存进 data-pinyin 属性，点击后循环切换：
- HTML 中写：
<ruby data-pinyin="zhǎng,cháng"><rb>长</rb><rt>zhǎng</rt></ruby>
- JS 解析
data-pinyin 得到数组，每次点击取下一个索引，用 <code>rt.textContent更新 - 注意处理空格、顿号等分隔符，建议统一用英文逗号
这种模式下，<rt></rt> 初始内容只是默认值，实际由 JS 全权管理，语义上仍是合法的 ruby 结构。
真正难的不是让拼音“出现”，而是让出现的时机、方式、边界行为（比如连点、快速切换、焦点管理、语音朗读兼容）都稳定可控。很多项目卡在无障碍测试或 iOS Safari 的 focus 行为上，别忽略 aria-live 或 aria-label 的补充。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
