You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何隐藏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;
}

说明

  1. 文本高亮器:.goog-gt-highlight和.goog-gt-spellmark是Google Translate标记高亮文本的核心类,通过清除背景、边框等样式完全隐藏高亮效果
  2. 弹出工具栏:补充gt-baf-container、gt-baf-footer等容易遗漏的弹出组件类,同时用visibility: hidden作为display: none的双重保障
  3. 顶部留白修复:移除工具栏后页面可能默认添加顶部偏移,通过body { top: 0 !important; }修正

内容的提问来源于stack exchange,提问作者Sted

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.13 19:37:14