Question

我有一个带有文字 TRANSLATE 的DIV，当它悬停时，会在下面显示一个包含Google Translate插件文字的方框，您可以选择翻译成英文。

尽管如此，我的问题是，点击选择语言之后，你将鼠标悬停在选项上（在这种情况下只有英文），带有部分文字和Google翻译插件的框消失（虽然不是语言选项）。

任何解决方案的想法？他们的选项DIV是否有任何Google ID /类，所以你可能会喜欢“当盘旋”时，“盒子”仍然可以通过 display：block; 看到。

上的演示

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的 In text 和 Vertical ，而不是 Only下拉菜单选项来管理解决方法（适用于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

我建议您在自己的答案中将问题发布到单独的问题中。我将解决有关消失框的原始问题。

当光标悬停在带有symlink()的 div 上时，选择框变为可见。当不再悬停在所述盒子上时，内容再次被隐藏。

点击下拉菜单时显示的选择语言面板会在基础内容上方的 iframe 中呈现。此iframe位于具有id="translate-text" CSS规则的translate-text div之外。因此，当将鼠标悬停在iframe内容上时，浏览器会将其视为不再悬停在:hover div上。这就是盒子内容被隐藏的原因。

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

出现框中的Google Translate插件（当悬停文本时）在选择语言时消失

2 个答案: