javascript - 获取光标下的单词并使用 JavaScript 输出相应的翻译

Question

我想在我的网站中实现假名助手:当用户将鼠标悬停在假名(日文字符)上时，它会输出正确的翻译。

我找到了这个:How to get a word under cursor using JavaScript?
jsfiddle

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',''); }
);

但我是 JavaScript 的初学者，我无法根据自己的需要重写它。我不需要自动设置跨度，我会手动设置。

例如我有这个:

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

当鼠标悬停在其中一个字符上时，我想在页面上的固定位置显示它的翻译:

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

Answer 1

您可以只使用::before 伪选择器来完成它。无需 JavaScript。

.kana {
  position: relative;
}
.kana:hover {
  color: blue;
}
.kana:hover::before {
  position: absolute;
  content: attr(romaji);
  top: 1em;
  color: blue;
}

<span class="kana" romaji="sho">しょ</span><span class="kana" romaji="ha">は</span><span class="kana" romaji="n">ん</span>