如何隐藏Google Translate高亮器与弹出工具栏?已隐藏顶部工具栏
问题
已在网站中集成Google Translate,希望隐藏顶部工具栏、文本高亮器及翻译弹出工具栏。目前已成功隐藏顶部工具栏,但文本高亮器和弹出工具栏仍无法隐藏。
当前尝试的CSS代码:
.skiptranslate { display: none !important; } *:not(html) .skiptranslate { display: none !important; } /* Hide the pop-up translation box */ #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover { display: none !important; } /* Prevent Google Translate toolbar */ .goog-te-banner-frame.skiptranslate { display: none !important; }
解决方案
使用以下CSS可以彻底隐藏剩余的高亮器和弹出工具栏:
/* 隐藏顶部工具栏及关联容器 */ .skiptranslate, .goog-te-banner-frame.skiptranslate { display: none !important; } /* 修复工具栏隐藏后页面顶部留白问题 */ body { top: 0 !important; } /* 清除文本高亮效果(覆盖Translate的高亮样式) */ .goog-gt-highlight, .goog-gt-spellmark { background: transparent !important; border: none !important; box-shadow: none !important; } /* 隐藏所有翻译弹出组件 */ #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .gt-baf-container, .gt-baf-footer { display: none !important; visibility: hidden !important; } /* 禁用触发弹出工具栏的文本选中交互 */ body * { user-select: auto !important; -webkit-user-select: auto !important; }
说明
- 文本高亮器:
.goog-gt-highlight和.goog-gt-spellmark是Google Translate标记高亮文本的核心类,通过清除背景、边框等样式完全隐藏高亮效果 - 弹出工具栏:补充
gt-baf-container、gt-baf-footer等容易遗漏的弹出组件类,同时用visibility: hidden作为display: none的双重保障 - 顶部留白修复:移除工具栏后页面可能默认添加顶部偏移,通过
body { top: 0 !important; }修正
内容的提问来源于stack exchange,提问作者Sted
相关产品推荐
相关产品推荐

