使用自定義按鈕進行谷歌翻譯

如何使這個引導轉換按鈕的工作，如果它是谷歌翻譯按鈕？ https://jsfiddle.net/bobrierton/1hx1b5sr/使用自定義按鈕進行谷歌翻譯

因此，當我創建的翻譯按鈕打開谷歌按鈕時，它的菜單按下時。也許隱藏，但以某種方式使用功能？

<ul class="nav navbar-nav navbar-border-bottom navbar-right"> 
    <li class=""> 

     <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"> 
      <i class="search fa fa-language"></i> Translate 
     </a> 
    </li> 
</ul> 

<div id="google_translate_element" style="float:left; padding-left:15px"></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>

來源

2015-12-08 David Brierton

你的問題不清楚.. –

哪裏引導按鈕？我沒有看到它在你的代碼或小提琴中，只是一個鏈接。 – JesseEarley

您可以用opacity: 0隱藏Google Translate按鈕。不透明度不會刪除該按鈕，因此即使它不可見，仍可以點擊該按鈕。您需要將自己的按鈕放在不可見的Google翻譯按鈕後面，否則它將不可點擊（已被覆蓋）。請注意，:hover和:focus等不在可見按鈕上工作，因爲它被不可見按鈕覆蓋。父母上的position: relative;是必需的，因爲position總是在下一個父母上取向，該父母的position屬性設置爲static以外的其他父母。

替換此行：

<div id="google_translate_element" style="float:left; padding-left:15px"></div>

隨着這些線路

<div style="position: relative;"> 
    <div id="google_translate_element" style="position: relative; opacity: 0;"></div> 
    <button style="position: absolute; left: 0; top: 0; z-index: -1;">Translate</button> 
</div>

來源

2015-12-08 20:55:00

使用自定義按鈕進行谷歌翻譯

回答

相關問題