我正在使用谷歌翻译,我试图弄清楚如何更改按钮上的悬停css。我可以在文本悬停时更改文本的颜色,但我正在尝试更改|并向下箭头也是相同的颜色。我尝试拨打span [0]
和span [1]
,但未能成功更改#18BA9B;
。非常感谢任何帮助。
https://jsfiddle.net/tgokbf5j/2/
$('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 {
color: #687074;
text-transform: uppercase;
}
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
color:#18BA9B;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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', 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');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
答案 0 :(得分:1)