在光标下获取一个单词，并使用JavaScript输出相应的翻译

我想在我的网站中实现一个假名助手：当用户将鼠标悬停在假名（日语字符）上时，它将输出正确的翻译

我发现了这个：

---

我冒昧地使用了

data-*

-属性，因为一个页面上不应该有多个具有相同id的元素

//绑定到每个跨度
$（“#原始跨度”）。悬停(
函数（）{$（'#translation'）.text（$（this.css（'background-color'，'#ffff66'））.data（'translation'）；），
function（）{$（'#translation'）.text（''）；$（this.css（'background-color'，''）；}
);
#翻译{
字号：700；
}

しょはん
翻译：
只需使用：：before伪选择器即可。不需要JavaScript


.kana{
位置：相对位置；
}
.kana:悬停{
颜色：蓝色；
}
.kana:hover:：before{
位置：绝对位置；
内容：attr（罗马书）；
顶部：1米；
颜色：蓝色；
}
しょはん是的，我知道，工具提示会更简单，但我想在wordpress小部件中显示翻译。@kukuschi我更新了答案，这就是你的意思吗？很好，现在我必须考虑走哪条路，js还是纯css。
html:
<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>

Word: <span id="word"></span>


js:
// wrap words in spans
$('p').each(function() {
var $this = $(this);
$this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

// bind to each span
$('p span').hover(
function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
function() { $('#word').text(''); $(this).css('background-color',''); }
);

<span id="sho">しょ</span><span id="ha">は</span><span id="n">ん</span>

しょ = "sho"  
は = "ha" or particle "wa"  
ん = "n"  
(one at a time)