jquery - 谷歌翻译填充问题

标签 jquery css

我遇到了谷歌翻译的填充问题。当您单击选择语言按钮并且菜单下拉时,最后一行(单词)位于 IE 和 Chrome 的边框顶部(Firefox 工作正常),但是如果您再次单击下拉菜单以重新打开填充再次固定....我无法弄清楚为什么会发生这种情况,就像第二次输入它一样,它会自动知道要更正自己。有人能告诉我为什么会这样吗?如果您对如何更正它有任何想法。

https://jsfiddle.net/tgokbf5j/4/

$('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'
        });
    });
});
a.goog-te-menu-value { 
text-decoration:none;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
a.goog-te-menu-value > span { 
text-transform: uppercase;
}
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
	color:#18BA9B;
}

a.goog-te-menu-value:hover span
{
      color: #18BA9B !important;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

最佳答案

* 是一个元字符,代表所有。这是对 jQuery documentation 的引用. 从此行中删除 *:

$("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 *")

它应该会像您预期的那样工作。

关于jquery - 谷歌翻译填充问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34136976/

相关文章:

css - 加载到页面中的 wordpress css 覆盖主 css

html - 向 div 元素的底部/顶部添加对 Angular 边框?

javascript - 如何使用 javascript/Extjs 制作默认横向打印?

css - @media in css3 仅适用于第一次选择

javascript - 在setInterval中找不到自己定义的函数

javascript mouseover/out 结合点击行为

javascript - 通过根据内容自动调整高度来防止文本区域 ENTER 行为

html - 网站在 Chrome/Firefox 中工作但在 Internet Explorer 中不工作

jquery - jQuery.before().remove 的问题

javascript - 可手持数据透视表