谷歌翻译器突出显示效果

| 我到处寻找代码,当我将鼠标悬停(或单击)另一个文本时,该代码将突出显示一段文本。 例如,如果我有文字'Je suis ici。我在这里,将鼠标悬停在单词“这里”时,对于单词“这里”和“ ici”将有一个黄色的背景。因此,我可以证明这里的单词是法语单词'ici \'的英语主要赞助者。 像Google翻译这样的工具:http://translate.google.com/ 在此先感谢您的任何建议! 达娜     
已邀请:
Google翻译的方法是将句子中的每个单词分成具有匹配类的单独的“ 0”标签。然后,可以通过JavaScript中的DOM访问这些文件-最简单的方法是使用JQuery之类的框架。 例如,您可以附加一个
mouseover()
函数以突出显示当前悬停的单词。 我无法在此处提供完整的示例-您需要提出一个起点并从那里开发解决方案。     
这使用了jQuery库,并从SO上的该答案中大量借用到一个相关的问题。 它的作用是将段落标签(
<p>
)中的每个单词分解,并用具有
highlightable
类的
<span>
标签包装,然后将悬停事件附加到
<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>
    

要回复问题请先登录注册