谷歌翻译插件在出现框(当悬停文本时)，在选择语言时消失。

Question

我有一个带有文本翻译的DIV，当它悬停时，它在下面显示一个方框，上面有一些文本，Google翻译插件，在这里你可以选择翻译成英语。

不过，我的问题是，在单击“选择语言”之后，您可以将选项(在本例中为英文)悬停在带有一些文本的框中，然后Google翻译插件就会消失(而不是语言选项)。

有什么解决办法吗？是否有谷歌id/类为他们的DIV的选项，这样你也许可以喜欢“当徘徊”的“盒子”仍然是可访问的槽显示:块；

参见JSFiddle的演示

PS。演示和下面的代码略有不同，颜色等等，只是为了更容易在演示中看到。

HTML:

<div id="translate-container">
 <div id="translate-text"> TRANSLATE
  <div class="translate-box">       
  <div class="load">Let it load...</div>

  <div id="google_translate_element"></div>
  <script type="text/javascript">
  function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'sv', includedLanguages: 'en',    
  layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false},   
  'google_translate_element');
  } </script>

  <script type="text/javascript"     
  src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">  
  </script>

  <br /><br />

 <div class="translate-info">We use Google Translate for translating. We take no 
 responsibility for the accuracy of the translation.</div>

  </div>
 </div>
</div>

也有一个元标签与谷歌翻译“连接代码”到我的帐户，但它没有必要张贴在这里。

CSS:

#translate-container {
 background: transparent;
}

#translate-text {
 padding-top: 6px;
 padding-right: 5px;
 text-align: right;
 font-family:verdana;
 font-weight: 700;
 color: #9e9e9e;  
}

#translate-text:hover {
 color: #aeaeae;   
}

#google_translate_element {
 float: left;
 margin-top: 0px;
 z-index: 1000;
}

.translate-box {
 display: none;
 color: #4b4b4b;
 font-size: 14px;
 font-weight: 500;
 position: absolute;
 margin-left: -80px;
 text-align:left;
 background: rgba(255,255,255,0.9);
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 height: 180px;
 width: 160px;
 padding: 10px 10px 10px 10px;
 box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.33);
 border-top: 3px solid #c83232;
 z-index: 100;
}

#translate-text:hover .translate-box {
 display: block;
}

.load {
 opacity: 1.0;
 transition: 0.5s;
 -webkit-transition: 0.5s; /* Safari */
 transition-delay: 1s;
 -webkit-transition-delay: 1s; /* Safari */
}

.translate-box:hover .load {
 opacity: 0.0;
}

.translate-info {
 font-size:11px;
 color: #4b4b4b;
 font-weight: 500;
}

Answer 1

通过选择使用Google的文本和垂直，而不是唯一的下拉菜单选项(用于谷歌翻译的网站管理员工具)，成功地完成了一项工作。

• 在IE里还是有点乱..。在移动光标之前，必须等待下拉菜单完全展开。你需要保持它绝对静止，否则它将消失和翻译框弹出时，悬停翻译。对这个问题有什么建议吗？
• 我还有一个问题。谷歌翻译用的是哪种语言？上面写着什么？它是用我的母语瑞典语写的，还是适应了游客从哪个国家看到的？

现在的样子： JSFiddle

HTML:

<div id="translate-container">

 <div id="translate-text"> <p class="notranslate">TRANSLATE</p>

   <div class="translate-box">       

    <div id="google_translate_element"></div><script type="text/javascript">
    function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'sv', autoDisplay: false},   
   'google_translate_element');
    }
    </script><script type="text/javascript"   
    src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">     
    </script>    
    <br /> <br />

  <div class="translate-info">Use Google to translate the website. <br /><br />  
  <span>Note: If you are using Internet Explorer, hold your cursor still until the drop  
  down menu has fully expanded.</span></div>  

  </div>
 </div>
</div>  

CSS:

#translate-container {
 background: #c8c8c8;
}

#translate-text {
 background: #969696;
 width:110px;
 padding-top: 0px;
 padding-bottom: 5px;
 padding-right: 0px;
 padding-left: 0px;
 text-align: left;
 font-family:verdana;
 font-weight: 700;
 color: #fff;
 overflow: visible;
}

#translate-text:hover {
 color: #000;
}

#google_translate_element {
 float: left;
 text-align: left;
 margin-top: 0px;
 z-index: 1000;
}

.translate-box {
 display: none;
 color: #4b4b4b;
 font-size: 14px;
 font-weight: 500;
 position: absolute;
 margin-left: 0px;
 margin-top: 0px;
 text-align:left;
 background: rgba(255,255,255,0.9);
 border-bottom-left-radius: 3px;
 border-bottom-right-radius: 3px;
 width: 220px;
 padding: 15px 15px 25px 15px;
 box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.33);
 border-top: 3px solid #000;
 z-index: 100;
 overflow:hidden;
}

#translate-text:hover .translate-box {
 display: block;
 height: auto;
}

.translate-info {
 font-size:11px;
 color: #4b4b4b;
 font-weight: 500;
}

.translate-info span {
 font-size:9px;
 color: #4b4b4b;
 font-weight: 500;
}

Answer 2

我建议把你的问题放在你自己回答的另一个问题上。我将回答关于消失盒子的原始问题。

当光标在带有div的id="translate-text"上盘旋时，选中框将变得可见。当这些内容不再徘徊在所述的盒子上时，内容就会再次被隐藏起来。

单击下拉时要选择的语言面板将在其自身的iframe中呈现在基础内容之上。这个iframe在translate-text div之外，具有:hover CSS规则。因此，当在iframe内容上徘徊时，浏览器将其视为不再悬停在translate-text div之上。这就是为什么盒子里的东西被隐藏起来的原因。

为了保留该框，您需要将语言选择iframe包含在translate-text div中，以便:hover规则仍然适用。为了做到这一点，您必须在创建/加载iframe时获得对它的引用，以便在DOM层次结构中的适当位置插入它。