鼠标悬停时，“ Google保存到云端硬盘”按钮将隐藏
[英]The Google Save To Drive button is hidden on mouse hovering
问题描述
I am trying to integrate Save To Drive button into my project. 
我正在尝试将“保存到驱动器”按钮集成到我的项目中。
At first, this is how I did. 一开始，这就是我的做法。
<div class="yo-popup-item">
<script src="https://apis.google.com/js/client:platform.js" async defer></script>
<div class="g-savetodrive" data-src="${currentURL}&format=csv"
data-filename="${survey.code}.csv"
data-sitename="Surveii">
</div>
${lang.SurveyResultList_SaveCSVDrive}
</div>
This is what I got 这就是我得到的
Then I tried this 然后我尝试了这个
<div class="yo-popup-item">
<script src="https://apis.google.com/js/platform.js" gapi_processed="true" async defer></script>
<div class="g-savetodrive" data-src="${currentURL}&format=csv"
data-filename="${survey.code}.csv"
data-sitename="Surveii" data-gapiattached="true"
style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: middle; display: inline-block; width: 58px; height: 29px;">
</div>
${lang.SurveyResultList_SaveCSVDrive}
</div>
And got this 并得到这个
This is what I expect. 这就是我的期望。 However, after a few times saving files to Google Drive, the button's tooltip position was automatically switched back to like the first screenshot above when I hover my mouse over the button. 但是，将文件保存到Google云端硬盘几次后，当我将鼠标悬停在按钮上时，按钮的工具提示位置会自动切换回上面的第一个屏幕截图。 This happened on both Google Chrome and Mozilla Firefox. 谷歌浏览器和Mozilla Firefox都发生了这种情况。 Does anyone know how to force the tooltip's position always below the button (like the 2nd screenshot)? 有谁知道如何强制工具提示的位置始终位于按钮下方（如第二个屏幕截图）？
UPDATED: As requested by other users, I will post additional html, css and js codes that directly related to the question. 更新：根据其他用户的要求，我将发布与该问题直接相关的其他html，css和js代码。
The Save To Drive button is contained within a div element, which in turn is part of a menu element. “保存到驱动器”按钮包含在div元素中，而div元素又是菜单元素的一部分。 The html code of the menu is. 菜单的html代码是。
<div class="col-sx-3 col-md-3 col-sm-3">
<a id="btnDownload" href="javascript: return false;" class="yo-tab form-control"
onclick="toggleList(event)
// var pu = $('#yo-download-list');
// if (pu.css('display') == 'none')
// {
// pu.show();
// }
// else
// {
// pu.hide();
// }
" style="padding: 0px; height: auto;">${lang.SurveyResultList_Download}</a>
<div style="position: absolute; width: 1px; height: 1px;">
<div id="yo-download-list" class="yo-popup-5" style="display: none; height: 200px; left: -10px; top: 10px; z-index: 99999; width: 300px;">
<div class="yo-popup-item"><a target="_blank" href="${currentURL}&format=csv">${lang.SurveyResultList_DownloadCSV}</a></div>
<div class="yo-popup-item"><a target="_blank" href="${currentURL}&format=xlsx">${lang.SurveyResultList_DownloadExcel}</a></div>
<div class="yo-popup-item"><a href="${ROOT}/survey-result-list-custom.yo?code=${survey.code}">${lang.SurveyResultList_SetCustomElement}</a></div>
<div class="yo-popup-item">
<script src="https://apis.google.com/js/platform.js" gapi_processed="true" async defer></script>
<div class="g-savetodrive" data-src="${currentURL}&format=csv"
data-filename="${survey.code}.csv"
data-sitename="Surveii" data-gapiattached="true"
style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: middle; display: inline-block; width: 58px; height: 29px;">
</div>
${lang.SurveyResultList_SaveCSVDrive}
</div>
</div>
</div>
</div>
And here are the css styles of the elements 这是元素的CSS样式
.yo-popup-5 {
position: absolute;
width: 170px;
height: 150px;
left: -10px;
text-align: left !important;
opacity: 0.9;
border-radius: 5px;
background-color: #01579b;
top: 20px;
}
.yo-popup-5 .yo-popup-item:hover {
/*border-right: solid 5px #03a9f4;*/
}
.yo-popup-5 .yo-popup-item {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.5;
letter-spacing: -0.1px;
color: #ffffff;
margin: 10px 1px 10px 10px!important;
}
.yo-popup-5 .yo-popup-item a {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.5;
letter-spacing: -0.1px;
color: #ffffff;
text-decoration: none;
}
.yo-popup-5 .yo-popup-item a:hover {
color: #00bcd4;
}
.yo-popup .yo-popup-item:hover {
border-right: solid 5px #03a9f4;
}
.yo-popup-item {
margin: 20px 1px 20px 10px;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.5;
letter-spacing: -0.1px;
color: #ffffff;
}
.yo-popup-item a {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.5;
letter-spacing: -0.1px;
color: #ffffff;
text-decoration: none;
}
.yo-popup-item a:hover {
color: #00bcd4;
}
This is the javascript function toggleList 这是javascript函数toggleList
function toggleList(event) {
var list = initSelector();
var cur_child = $(event.currentTarget).next().children();
cur_child.css('z-index', 102);
cur_child.slideToggle(500);
$(list).each(function() {
var child = $(this).next().children();
if ($(child).css('display') != 'none' && $(child).prop('id') != $(cur_child).prop('id')) {
if ($(child).prop('id').endsWith('-list')
&& $(child).prop('id').startsWith('yo-')) {
$(child).css('z-index', (Number($(child).css('z-index')) - 1));
$(child).slideUp(500);
}
}
});
event.stopPropagation();
}
I have noticed the html code generated by Google Drive API upon runtime. 我注意到运行时Google Drive API生成的html代码。
<div style="display: block; visibility: hidden; position: absolute; width: 356px; left: -10000px; top: -10000px; height: 96px; z-index: 2000000003;">
<table cellpadding="0" cellspacing="0" dir="ltr" style="width: 356px; height: 96px;" frame="void" rules="none" class=" gc-bubbleDefault pls-container">
<tbody>
<tr class="gc-reset">
<td class="pls-topLeft gc-reset">
<img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
</td>
<td class="pls-topTail gc-reset">
<img class="pls-tailbottom gc-reset" style="width: 15px !important; height: 9px !important; max-width: 15px !important; max-height: 9px !important; display: inline; left: 6px; top: 0px;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
<img class="pls-spacerbottom gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
<td class="pls-topRight gc-reset">
<img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
</td>
</tr>
<tr class="gc-reset">
<td class="pls-vertShimLeft gc-reset">
<img class="gc-reset" style="width:1px !important; height:4px !important; max-width: 1px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
<td class="pls-vertShim gc-reset">
<img class="gc-reset" style="width:1px !important; height:4px !important; max-width: 1px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
<td class="pls-vertShimRight gc-reset">
<img class="pls-dropTR gc-reset" style="width:5px !important; height:4px !important; max-width: 5px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
</tr>
<tr class="gc-reset">
<td class="pls-contentLeft gc-reset">
<img class="pls-tailright gc-reset" style="width: 9px !important; height: 15px !important; max-width: 9px !important; max-height: 15px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
<img class="pls-spacerright gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
<td class="pls-contentWrap gc-reset">
<img class="pls-spinner " style="width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; visibility: hidden;" src="https://ssl.gstatic.com/docs/documents/share/images/spinner-1.gif">
<div class="goog-bubble-content gc-reset" style="width: 350px; height: 78px;">
<iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="margin: 0px; position: absolute; z-index: 1; border-style: none; outline: none; width: 350px; height: 78px;" tabindex="0" vspace="0" width="100%" id="I0_1522823882765" name="I0_1522823882765" src="https://drive.google.com/savetodrivehover?authuser=1&usegapi=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.HC2g6SRsg_U.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPz5Aj2-ryLqteRLkIrqMk6EuzCaQ#id=I0_1522823882765&_gfid=I0_1522823882765&parent=http%3A%2F%2Fdemo.surveii.com&pfname=&rpctoken=11814994"></iframe>
</div>
</td>
<td class="pls-dropRight gc-reset">
<img class="pls-tailleft gc-reset" style="width: 12px !important; height: 19px !important; max-width: 12px !important; max-height: 19px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
<img class="pls-spacerleft gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
</tr>
<tr class="gc-reset">
<td class="pls-bottomLeft gc-reset">
<img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
</td>
<td class="gc-reset">
<table cellpadding="0" cellspacing="0" style="width:100%" class="gc-reset">
<tbody>
<tr class="gc-reset">
<td class="pls-vert gc-reset">
<img class="pls-dropBL gc-reset" style="width:4px !important; height:5px !important; max-width: 4px !important; max-height: 5px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
<td class="pls-dropBottom gc-reset">
<img class="pls-tailtop gc-reset" style="width: 19px !important; height: 13px !important; max-width: 19px !important; max-height: 13px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
<img class="pls-spacertop gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
</tr>
</tbody>
</table>
</td>
<td class="pls-vert gc-reset">
<img class="pls-dropBR gc-reset" style="width:5px !important; height:5px !important; max-width: 5px !important; max-height: 5px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
</tr>
</tbody>
</table>
</div>
And when I hovered my mouse on the Save To Drive button, the html code was changed to 当我将鼠标悬停在“保存到驱动器”按钮上时，html代码更改为
<div style="display: block; visibility: visible; position: absolute; width: 356px; left: 255px; top: 324px; height: 96px; z-index: 2000000009;">
<table cellpadding="0" cellspacing="0" dir="ltr" style="width: 356px; height: 96px;" frame="void" rules="none" class=" gc-bubbleDefault pls-container">
<tbody>
<tr class="gc-reset">
<td class="pls-topLeft gc-reset">
<img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
</td>
<td class="pls-topTail gc-reset">
<img class="pls-tailbottom gc-reset" style="width: 15px !important; height: 9px !important; max-width: 15px !important; max-height: 9px !important; display: inline; left: 6px; top: 0px;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
<img class="pls-spacerbottom gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
<td class="pls-topRight gc-reset">
<img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
</td>
</tr>
<tr class="gc-reset">
<td class="pls-vertShimLeft gc-reset">
<img class="gc-reset" style="width:1px !important; height:4px !important; max-width: 1px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
<td class="pls-vertShim gc-reset">
<img class="gc-reset" style="width:1px !important; height:4px !important; max-width: 1px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
<td class="pls-vertShimRight gc-reset">
<img class="pls-dropTR gc-reset" style="width:5px !important; height:4px !important; max-width: 5px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
</tr>
<tr class="gc-reset">
<td class="pls-contentLeft gc-reset">
<img class="pls-tailright gc-reset" style="width: 9px !important; height: 15px !important; max-width: 9px !important; max-height: 15px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
<img class="pls-spacerright gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
<td class="pls-contentWrap gc-reset">
<img class="pls-spinner " style="width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; visibility: hidden;" src="https://ssl.gstatic.com/docs/documents/share/images/spinner-1.gif">
<div class="goog-bubble-content gc-reset" style="width: 350px; height: 78px;">
<iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="margin: 0px; position: absolute; z-index: 1; border-style: none; outline: none; width: 350px; height: 78px;" tabindex="0" vspace="0" width="100%" id="I0_1522823882765" name="I0_1522823882765" src="https://drive.google.com/savetodrivehover?authuser=1&usegapi=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.HC2g6SRsg_U.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPz5Aj2-ryLqteRLkIrqMk6EuzCaQ#id=I0_1522823882765&_gfid=I0_1522823882765&parent=http%3A%2F%2Fdemo.surveii.com&pfname=&rpctoken=11814994"></iframe>
</div>
</td>
<td class="pls-dropRight gc-reset">
<img class="pls-tailleft gc-reset" style="width: 12px !important; height: 19px !important; max-width: 12px !important; max-height: 19px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
<img class="pls-spacerleft gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
</tr>
<tr class="gc-reset">
<td class="pls-bottomLeft gc-reset">
<img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
</td>
<td class="gc-reset">
<table cellpadding="0" cellspacing="0" style="width:100%" class="gc-reset">
<tbody>
<tr class="gc-reset">
<td class="pls-vert gc-reset">
<img class="pls-dropBL gc-reset" style="width:4px !important; height:5px !important; max-width: 4px !important; max-height: 5px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
<td class="pls-dropBottom gc-reset">
<img class="pls-tailtop gc-reset" style="width: 19px !important; height: 13px !important; max-width: 19px !important; max-height: 13px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
<img class="pls-spacertop gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
</tr>
</tbody>
</table>
</td>
<td class="pls-vert gc-reset">
<img class="pls-dropBR gc-reset" style="width:5px !important; height:5px !important; max-width: 5px !important; max-height: 5px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
</td>
</tr>
</tbody>
</table>
</div>
(Notice the div element that I highlighted) （注意我突出显示的div元素）
Please take a look and let me know what should I do to relocate the button's tooltip. 请看一下，让我知道该怎么做才能重新定位按钮的工具提示。 Thanks. 谢谢。
1 个解决方案
解决方案1
1 2018-04-04 03:42:27
This has nothing to do with Drive API at all. 这与Drive API完全无关。
Check the order to which you place your < div > tags, your DOM elements in the page. 检查在页面中放置<div>标签和DOM元素的顺序。 Observe the hierarchy of page elements. 观察页面元素的层次结构。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将鼠标悬停在关闭按钮上时，没有出现手 - On hovering mouse to close button hand is not appearing
如果鼠标悬停在按钮上但移动，动画将重置 - Animation resets if mouse is hovering over the button but moves
在悬停时检查鼠标按钮是否按下？ - Check if mouse button is down while hovering?
悬停Google Map时禁用鼠标EventListener - Disable mouse EventListener when hovering a Google Map
无法对数据或Blob源使用“保存按钮（通过Google驱动器）” - Unable to use “save button (by google drive)” with data or blob source
Google云端硬盘“保存”按钮文本编辑-跨网域iframe编辑 - Google Drive Save button Text Editing - Cross Domain iframe edit
Google Drive API“保存到驱动器”多个文件 - Google Drive API "Save to Drive" multiple files
触发单击“保存到驱动器”按钮 - Trigger click on Save To Drive button
通过API保存到Google云端硬盘 - Save to Google Drive via API
将 Gmail 附件保存到 Google 云端硬盘 - Save Gmail attachments on Google Drive
相关标签