HTML中ruby标签配合CSS实现优雅的悬停注音-html教程-PHP中文网

ruby标签默认将rt渲染为小号、居上注音，无交互能力；实现悬停显示需用css控制rt的display与:hover，chrome120+、firefox115+、safari17.4+支持，ie完全不支持。

html中ruby标签配合css实现优雅的悬停注音

ruby标签在现代浏览器中的基本行为

默认情况下，<ruby></ruby> 会把 <rt></rt> 渲染为小号、居上对齐的注音（如日文假名），但仅限内联显示，且不支持悬停展开——它本身没有交互能力。想实现“鼠标移上去才显示注音”，不能依赖 <ruby></ruby> 原生逻辑，得用 CSS 控制 <rt></rt> 的显隐。

用CSS控制rt的悬停显示（兼容性关键）

主流浏览器（Chrome 120+、Firefox 115+、Safari 17.4+）已支持对 <rt></rt> 使用 display: none 和 :hover，但必须注意：IE 完全不支持 <ruby></ruby>，旧版 Safari（display 对 <rt></rt> 的设置，直接强制显示。所以实际方案是：

默认让 <rt></rt> 不可见：ruby rt { display: none; }
只在 <ruby></ruby> 被悬停时显示：ruby:hover rt { display: inline; }
加过渡避免突兀：ruby rt { transition: opacity 0.15s; opacity: 0; } + ruby:hover rt { opacity: 1; }
补一句 ruby { cursor: pointer; }，让用户感知可交互

避免line-height和vertical-align引发的错位

<rt></rt> 默认 vertical-align 是 text-top，但配合自定义字体或行高时容易偏高或压字。常见表现是注音浮在汉字上方太远，或跟下一行文字重叠。解决方法很直接：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

统一设置 ruby { line-height: 1.5; }（别用 normal）
强制 rt { vertical-align: 0.3em; }（数值按字体调整，0.2–0.4em 较稳妥）
如果父容器用了 font-size: 0; 清除空格，会导致 <rt></rt> 消失，必须给 ruby 单独设 font-size: 1rem;