Question

如何让这个引导翻译按钮像google翻译按钮一样工作？ https://jsfiddle.net/bobrierton/1hx1b5sr/

因此，当我按下时，我创建的翻译按钮会从google按钮打开菜单。也许隐藏但是以某种方式使用功能？

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

Answer 1

您可以使用opacity: 0隐藏Google翻译按钮。不透明度不会删除按钮，因此即使它不可见，仍然可以单击它。您需要将自己的按钮放在隐藏的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>

使用Google翻译的自定义按钮

1 个答案: