url：http://translate.google.com/
例如即可。源郎是英文，翻译朗是其他。并在上面的页面的textarea中输入文本“i”。将翻译单词悬停，单词background将突出显示，'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>
最好提供一些简单的演示或代码。 非常感谢！
答案 0 :(得分：2)
我想它可以像这样工作：
通过“翻译机”运行源代码，它会生成翻译文本，并在此过程中对源代码进行大量标记（注释） - 翻译也附带注释。
< / LI>翻译过程确定源中的哪些令牌彼此链接（例如短语动词）以及令牌如何链接到翻译中的相应元素。
翻译文本是最终产品，它是从具有更丰富的注释和标签的数据集生成的 - 使用这个更丰富的集合，您可以将这个带注释的结构编译成任何其他格式（例如，XML），或者就HTML而言，它可能采用大量跨度的形式，每个跨度都带有ID。
表面上，HTML也是为源文本重新制作的（现在使用底层注释的结构）。它就像一个带有大量跨度的标记化文本，每个跨度都有一个生成的ID。通常有另一层与文本区域匹配并带有突出显示。
然后可能会有一个中间部分，用于确定翻译中哪个鼠标悬停应该点亮源中的哪个跨度。