Question

我看了一遍代码，当我悬停（或点击）另一个文本时，它会突出显示一段文字。

例如，如果我有'Je suis ici'的文字。我在这里'，当我在“在这里”这个词时，我会在“这里”和“ici”这个词上找到一个黄色的bachground。所以我可以证明这里的单词是法语单词'ici'的英语对应词。

谷歌翻译使用的是：http://translate.google.com/

提前感谢任何建议！德纳。

Answer 1

Google翻译的方式是将句子中的每个单词拆分为具有匹配类别的单独<span>标记。然后可以通过JavaScript中的DOM访问它们 - 最容易使用JQuery等框架。

例如，您可以附加mouseover()功能以突出显示当前悬停的单词。

我不能在这里给你一个完整的例子 - 你需要提出一个起点并从那里开发你的解决方案。

Answer 2

这使用jquery库，并从this answer on SO大量借用related question。

它的作用是分解段落标记（<p>）中的每个单词，并用<span>标记包含highlightable类，然后在悬停时附加一个事件<span class='highlightable'>标签。如果只想使用一个段落，则为其指定一个ID并仅绑定给定ID中的那些项目。如果是几段，请使用一个或多个ID。

<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>

<script type="text/javascript">
    $(document).ready(function() {
        // wrap words in spans
        $("p").each(function() {
            $(this).text().
                replace(/\b(\w+)\b/g, "<span class='highlightable'>$1</span>");
        });

        // bind to each highlightable span
        $('.highlightable').hover(
            function() { $(this).css('background-color','#ffff66'); },
            function() { $(this).css('background-color',''); }
        );
    });
</script>

谷歌翻译高亮效果

2 个答案: