CSS 隐藏谷歌翻译栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11248673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding Google Translate bar
提问by MB34
I have the following code:
我有以下代码：
<div style="" class="skiptranslate">
<iframe frameborder="0" style="visibility:visible"
src="javascript:''"
class="goog-te-banner-frame skiptranslate"
id=":2.container"></iframe>
</div>
I need to hide it but if I only hide the goog-te-banner-frame using:
我需要隐藏它，但如果我只使用以下方法隐藏 goog-te-banner-frame：
.goog-te-banner-frame {
display:none !important
}
It still throws my header down. If I use this:
它仍然让我的头球落下。如果我使用这个：
.skiptranslate {
display:none !important
}
It also hides the language selection dropdown because it shares the same class. I'd like to hide the skiptranslate div that CONTAINS the goog-te-banner-frame.
它还隐藏了语言选择下拉列表，因为它共享相同的类。我想隐藏包含 goog-te-banner-frame 的 skiptranslate div。
How do I do that?
我怎么做？
Edit: This is actual code to "create" the translate div above:
编辑：这是“创建”上面翻译div的实际代码：
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false,
includedLanguages: ''}, 'google_translate_element');}
</script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
回答by MB34
Ok, this works for some reason:
好的，这出于某种原因有效：
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
回答by Syntax
The selected answer is wrong!
选择的答案是错误的！
I know this is an old question, but for anyone coming across this problem in the future, the easiest way:
我知道这是一个老问题，但是对于将来遇到此问题的任何人，最简单的方法是：
body > .skiptranslate {
display: none;
}
Since the iframes are dynamically added directly to the body, you can simply select only direct descendants and nothing deeper.
由于 iframe 是直接动态添加到正文中的，因此您可以只选择直接后代，而无需选择更深层次的内容。
回答by user2967772
http://thoughtsforbeans.blogspot.in/2012/08/translate-your-website-with-google.html#.Unx4jfmnqQA
http://thoughtsforbeans.blogspot.in/2012/08/translate-your-website-with-google.html#.Unx4jfmnqQA
Its working Fine with the link of this code. I fixed on my site.
使用此代码的链接可以正常工作。我固定在我的网站上。
回答by Dexter Huinda
Try to add another class, say .myClass {display: none;}, append to skiptranslate, like class="skiptranslate myClass"
尝试添加另一个类，例如.myClass {display: none;}，附加到skiptranslate，例如class="skiptranslate myClass"
EDIT:
编辑：
Another solution:
You can also wrap the google translate code with another div, say <div id="google-wrapper">... google translate code...</div>and then style the wrapper with display: none;
另一个解决方案：您还可以用另一个 div 包装谷歌翻译代码，<div id="google-wrapper">... google translate code...</div>然后用display: none;
OR
或者
See this fiddle: http://jsfiddle.net/SryPD/
看到这个小提琴：http: //jsfiddle.net/SryPD/
回答by Roddy of the Frozen Peas
Why don't you just add an id to the skiptranslatediv that holds the goog-te-banner-frame? <div id="something" class="skiptranslate" style="">will then allow you to style div#something { display: none !important; }
为什么不直接向skiptranslate包含 goog-te-banner-frame的div添加一个 id ？<div id="something" class="skiptranslate" style="">然后将允许您设计样式div#something { display: none !important; }
回答by Dwight Vietzke
I found this to work the best for me. I send the Google Translate "origninal text" tooltip to z-index: -1000. So it is still in the page, but out of sight.
我发现这对我来说是最好的。我将 Google 翻译的“原始文本”工具提示发送到 z-index：-1000。所以它仍然在页面中，但不在视线范围内。
// Force hiding of "original text" popup for menus, etc. (very annoying)
jQuery(selector).bind(
"mouseenter mouseleave",
function (event) {
if (event.type === 'mouseenter') { google_trans_tt.css('z-index', -1000); }
else { google_trans_tt.css('z-index', 1000); }
}
);
