Text disappears when curser is on text on a Google Translated webpage

Question

I have translated a webpage with google translate. But when we get curser over translated text, text disappears.

Can anyone tell how to solve this?

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>

ankit verma · Answer 1 · 2017-05-12T11:14:00.453

0

I have added the style for the <p> tag in which the google class is appending and hiding the element. That not acutely blinking.

Hope might help you

thanks

<!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>

edited May 12 '17 at 11:14

answered May 12 '17 at 11:02

ankit verma

616
5
17

still same. I guess it's disappearing – Observer May 12 '17 at 11:07
It did but as side-effect it makes appear a strip when curser goes on text. – Observer May 12 '17 at 11:20
Add this two property also – ankit verma May 12 '17 at 11:26
if you remove "goog-text-highlight{display:none!important;opacity:0;}" from my code it gives same result – Observer May 12 '17 at 11:43
but this class "goog-text-highlight" does not have all the property and if you check in UI you will get that its calling from some other file – ankit verma May 12 '17 at 11:52
solved, u can check on above link, thnks for trying though – Observer May 12 '17 at 11:57

score 0 · Answer 2 · edited May 23 '17 at 11:54

0

Replacing .goog-text-highlight with below code worked.

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

Reference: How to disable google translate original text tooltips

edited May 23 '17 at 11:54

Community

1
1

answered May 12 '17 at 11:48

Observer

345
1
4
21

Text disappears when curser is on text on a Google Translated webpage

2 Answers2