堆棧內存溢出
  簡體   English   中英

鼠標懸停時，“ Google保存到雲端硬盤”按鈕將隱藏

[英]The Google Save To Drive button is hidden on mouse hovering

 原文  2018-04-04 02:44:04  5   1    javascript/ css/ google-api/ google-drive-api

問題描述

我正在嘗試將“保存到驅動器”按鈕集成到我的項目中。

一開始，這就是我的做法。 

<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>
    &nbsp; ${lang.SurveyResultList_SaveCSVDrive}

</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>
    &nbsp; ${lang.SurveyResultList_SaveCSVDrive}

</div>

並得到這個

期望位置

這就是我的期望。 但是，將文件保存到Google雲端硬盤幾次后，當我將鼠標懸停在按鈕上時，按鈕的工具提示位置會自動切換回上面的第一個屏幕截圖。 谷歌瀏覽器和Mozilla Firefox都發生了這種情況。 有誰知道如何強制工具提示的位置始終位於按鈕下方（如第二個屏幕截圖）？

更新：根據其他用戶的要求，我將發布與該問題直接相關的其他html，css和js代碼。

“保存到驅動器”按鈕包含在div元素中，而div元素又是菜單元素的一部分。 菜單的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>
                &nbsp; ${lang.SurveyResultList_SaveCSVDrive}

            </div>
        </div>
    </div>
</div>

這是元素的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;
}

這是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();
}

我注意到運行時Google Drive API生成的html代碼。

HTML代碼生成的Google Drive API 

<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&amp;usegapi=1&amp;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&amp;_gfid=I0_1522823882765&amp;parent=http%3A%2F%2Fdemo.surveii.com&amp;pfname=&amp;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>

當我將鼠標懸停在“保存到驅動器”按鈕上時，html代碼更改為

Google雲端硬盤API生成的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&amp;usegapi=1&amp;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&amp;_gfid=I0_1522823882765&amp;parent=http%3A%2F%2Fdemo.surveii.com&amp;pfname=&amp;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>

（注意我突出顯示的div元素）

請看一下，讓我知道該怎么做才能重新定位按鈕的工具提示。 謝謝。

1 個解決方案

解決方案1
 1  2018-04-04 03:42:27

這與Drive API完全無關。

檢查在頁面中放置<div>標簽和DOM元素的順序。 觀察頁面元素的層次結構。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將鼠標懸停在關閉按鈕上時，沒有出現手 如果鼠標懸停在按鈕上但移動，動畫將重置 在懸停時檢查鼠標按鈕是否按下？ 懸停Google Map時禁用鼠標EventListener 無法對數據或Blob源使用“保存按鈕（通過Google驅動器）” Google雲端硬盤“保存”按鈕文本編輯-跨網域iframe編輯 Google Drive API“保存到驅動器”多個文件 觸發單擊“保存到驅動器”按鈕 通過API保存到Google雲端硬盤 將 Gmail 附件保存到 Google 雲端硬盤
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM