谷歌翻译亮点答案

【问题标题】：google translator highlight谷歌翻译亮点
【发布时间】：2011-08-24 07:11:10
【问题描述】：

网址：http://translate.google.com/

例如。源语言是英语，翻译语言是其他。并在上面页面的文本区域中输入文本“i”。悬停翻译单词，单词背景将突出显示，“i”将突出显示。

我想知道爆出的代码'.gt-hl-layer' 和'#source' 的配合是如何工作的？

<div style="width: 100%;"><!--from google translator-->
<div class="gt-hl-layer" style="box-sizing: content-box; width: 641px; height: 65px; left: 0px; top: 0px; " dir="ltr"></div>
<textarea id="source" name="text" wrap="SOFT" tabindex="0" dir="ltr" spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" style="overflow-y: hidden; overflow-x: auto; box-sizing: border-box; " class="goog-textarea"></textarea>
</div>

最好给出一些简单的demo或者代码。非常感谢！

【问题讨论】：

标签： google-translate

【解决方案1】：

我想它可以像这样工作：

通过“翻译机”运行源代码，它产生翻译后的文本，并在此过程中对源代码进行大量标记（注释）——翻译还带有注释。
翻译过程确定源中的哪些标记相互链接（例如短语动词）以及标记如何链接到翻译中的相应元素。
从表面上看，HTML 也是为源文本重新制作的（现在具有来自底层注释的结构）。它就像一个带有许多跨度的标记化文本，每个跨度都有一个生成的 ID。通常还有另一层与文本区域匹配并带有突出显示。
然后可能有一个中间部分，它映射出翻译中的哪个鼠标悬停应该点亮源中的哪个跨度。

【讨论】：