Google Save To Drive按钮鼠标悬停隐藏，集成遇阻寻求技术解决

我来帮你搞定这个悬停隐藏的问题！这种情况大概率是CSS样式冲突或者异步加载的渲染时机问题导致的，咱们一步步排查解决：

1. 先排查父元素的hover样式冲突 #

这是最常见的原因——你的父元素.yo-popup-item或者上层容器可能设置了hover时隐藏子元素的样式（比如opacity:0、display:none、visibility:hidden）。

你可以打开浏览器开发者工具（按F12），选中这个Save To Drive按钮，然后切换到:hover状态，查看右侧样式面板里的属性变化，看看是不是被父元素的hover样式给覆盖了。如果找到对应的样式，直接修改或者用自定义CSS覆盖就行。

2. 调整异步加载的初始化逻辑 #

Google的platform.js是异步加载的，可能按钮还没渲染完成，父元素的交互事件就已经触发了，导致悬停异常。你可以给脚本加个加载完成的回调，确保按钮初始化后再处理样式：

<div class="yo-popup-item">
  <div class="g-savetodrive" 
       data-src="${currentURL}&format=csv" 
       data-filename="${survey.code}.csv" 
       data-sitename="Surveii">
  </div>
  &nbsp; ${lang.SurveyResultList_SaveCSVDrive}
</div>

<!-- 把脚本放在页面底部，加onload回调 -->
<script src="https://apis.google.com/js/client:platform.js" async defer onload="initSaveToDrive()"></script>
<script>
function initSaveToDrive() {
  const saveBtn = document.querySelector('.g-savetodrive');
  const parentItem = saveBtn.closest('.yo-popup-item');
  
  // 强制开启按钮和父元素的指针事件，避免被禁用
  parentItem.style.pointerEvents = 'auto';
  saveBtn.style.pointerEvents = 'auto';
}
</script>

3. 用自定义CSS强制保持按钮可见 #

如果排查到是样式被覆盖，直接写个优先级高的CSS规则，强制按钮在hover时保持可见：

/* 覆盖按钮自身的hover隐藏样式 */
.g-savetodrive:hover,
.g-savetodrive:focus {
  opacity: 1 !important;
  display: inline-block !important;
  visibility: visible !important;
}

/* 覆盖父元素hover时对按钮的影响 */
.yo-popup-item:hover .g-savetodrive {
  opacity: 1 !important;
  display: inline-block !important;
}

4. 调整DOM结构，避免文本交互影响按钮 #

有时候按钮旁边的文本hover事件也会干扰按钮，你可以把按钮和文本分开包裹，隔离交互：

<div class="yo-popup-item">
  <div class="save-drive-btn-wrapper">
    <div class="g-savetodrive" 
         data-src="${currentURL}&format=csv" 
         data-filename="${survey.code}.csv" 
         data-sitename="Surveii">
    </div>
  </div>
  <span class="save-text">&nbsp; ${lang.SurveyResultList_SaveCSVDrive}</span>
</div>

然后给按钮容器加基础样式，确保hover时不会被影响：

.save-drive-btn-wrapper {
  display: inline-block;
  /* 确保容器hover时不会改变子元素状态 */
  transition: none !important;
}

你可以先从排查CSS样式开始，这是最快定位问题的方法，一般都能解决！

内容的提问来源于stack exchange，提问作者Anthony