title: Changing Google Translate Hover Color
body: <p>I am using google translate and I am trying to figure out how to change the hover css on the button. I was able to change the color of the text when it is hovered over but I am trying to change the | and down arrow to the same color as well. I tried calling <code>span [0]</code> and <code>span [1]</code> but have been unsuccessful in making the change to <code>#18BA9B;</code>. Any assistance would be greatly appreciated.</p>
  
  <p><a href="https://jsfiddle.net/tgokbf5j/2/" rel="nofollow">https://jsfiddle.net/tgokbf5j/2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('document').ready(function () {
      $('#google_translate_element').on("click", function () {
  
          // Change font family and color
          $("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *")
              .css({
                  'color': '#687074',
                  'font-family': 'tahoma'
              });
  
          // Change hover effects
          $("iframe").contents().find(".goog-te-menu2-item div").hover(function () {
              $(this).css('background-color', '#18BA9B').find('span.text').css('color', 'white');
          }, function () {
              $(this).css('background-color', 'white').find('span.text').css('color', '#687074');
          });
  
          // Change Google's default blue border
          $("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #18BA9B');
  
          // Change the iframe's box shadow
          $(".goog-te-menu-frame").css({
              '-moz-box-shadow': '0 3px 8px 2px #666666',
              '-webkit-box-shadow': '0 3px 8px 2px #666',
              'box-shadow': '0 3px 8px 2px #666'
          });
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a.goog-te-menu-value { 
  text-decoration:none;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  a.goog-te-menu-value &gt; span { 
  color: #687074;
  text-transform: uppercase;
  }
  div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
   color:#18BA9B;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="google_translate_element" style="float:left; padding-left:15px"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      function googleTranslateElementInit() {
          new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ca,da,de,el,en,es,fr,it,ja,ko,nl,pl,pt,ru,sv,tl', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
  }
  &lt;/script&gt;
  &lt;script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>