当光标位于 Google 翻译网页上的文本上时，文本会消失答案

【问题标题】：Text disappears when curser is on text on a Google Translated webpage当光标位于 Google 翻译网页上的文本上时，文本会消失
【发布时间】：2017-05-12 10:55:06
【问题描述】：

我用谷歌翻译翻译了一个网页。但是当我们将光标移到翻译文本上时，文本就会消失。

谁能告诉我如何解决这个问题？

http://careturtle.com/firebase/translate_test.php

<!doctype html>
<html>
    <head>
        <title>Translator</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script src="jquery.cookie.js"></script>    
        <style type="text/css">
        .goog-te-banner-frame.skiptranslate{display:none!important;}
        body{top:0px!important;}
        div#goog-gt-tt{display:none!important;}.goog-text-highlight{display:none!important;opacity:0;}
        </style>
    </head>
    <body>
        <script type="text/javascript">
        $.cookie('googtrans', '/en/hi');
        </script>
        <div id="google_translate_element" style="display: none;"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    This is a test website.
    </body>
</html>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

我添加了<p> 标记的样式，其中 google 类 正在追加和隐藏元素。那不是剧烈眨眼。

希望对你有帮助

谢谢

<!doctype html>
<html>
    <head>
        <title>Translator</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script src="jquery.cookie.js"></script>    
        <style type="text/css">
        .goog-te-banner-frame.skiptranslate{display:none!important;}
        body{top:0px!important;}
        div#goog-gt-tt{display:none!important;}.goog-text-highlight{display:none!important;opacity:0;}
        </style>
<style>
p.appearnone font font{
        display: block !important;
        opacity: 1 !important
}
</style>
    </head>
    <body>
        <script type="text/javascript">
        $.cookie('googtrans', '/en/hi');
        </script>
        <div id="google_translate_element" style="display: none;"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <p class="appearnone">This is a test website.
    </body>
</html>

【讨论】：

还是一样。我猜它正在消失
确实如此，但作为副作用，当光标继续文本时，它会出现一条条。
也添加这两个属性
如果你从我的代码中删除 "goog-text-highlight{display:none!important;opacity:0;}" 它会得到相同的结果
但是这个类“goog-text-highlight”没有所有的属性，如果你签入 UI，你会从其他文件中得到它的调用

【解决方案2】：

用下面的代码替换 .goog-text-highlight 有效。

.goog-text-highlight { background: none !important; box-shadow: none !important;}

参考： How to disable google translate original text tooltips

【讨论】：