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

我冒昧地使用data-* - 属性，因为页面上不应该有多个具有相同ID的元素。

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

#translation {
  font-weight: 700;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="raw">
  <span data-translation="sho">しょ</span><span data-translation="ha">は</span><span data-translation="n">ん</span>
</div>

Translation: <span id="translation"></span>

Answer 2

您可以使用:: before伪选择器来执行此操作。无需JavaScript。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: