加載工具提示時，鼠標光標旁邊的旋轉圖標（jQuery）

Question

我有一種獨特的情況，我想在鼠標光標旁邊顯示一個旋轉的加載圖標 。

當用戶將鼠標懸停在div時，將顯示此圖標。 1300ms的延遲后，將顯示工具提示。 當提示提示被延遲時，將顯示旋轉圖標，然后在提示提示后隱藏。

我已經使用jquery-ui .position擴展編寫了一些代碼，並實現了我所需要的。 但是，一旦顯示工具提示並且旋轉圖標消失，當我移動鼠標光標時，它將立即返回。 我希望圖標永久消失，直到將鼠標移到div之外。

---

例如：我已經創建了這個場景的jsfiddle 。

將鼠標光標懸停在“ Product Info Container 。 您將看到旋轉圖標出現，並且在1300ms之后，將顯示工具提示，並且旋轉圖標將消失。 但是一旦再次移動鼠標，該圖標就會返回。

---

顯示工具提示后，如何隱藏旋轉圖標，無論是否移動鼠標？

我到目前為止擁有的jQuery代碼如下。

jQuery( document ).ready( function( $ ) {
    var delay = 1300;
    var timeout;
    $('.product-bottom-info-container').hover(
        function(e) {
            var that = $(this);
            timeout = setTimeout(function() {
                that.find('.product-custom-tooltip-container').css({
                    display: 'inline-block',
                    position: 'fixed',
                    zIndex: '5000',
                    margin: '10px',
                    whiteSpace: "nowrap"
                }).position({
                    my: "right+10 center",
                    at: "center",
                    of: e,
                    collision: "fit flip"
                });

                $('.mouse-spinner').hide();
            }, delay);
        }, 
        function() {
            clearTimeout(timeout);
            $(this).find('.product-custom-tooltip-container').hide();
            $('.mouse-spinner').hide();
        }
    ).mousemove(function(e) {
        $('.mouse-spinner').css({
            display: 'inline-block',
            position: 'fixed',
            zIndex: '5000',
        }).position({
            my: "left+10 top+12",
            at: "center",
            of: e,
            collision: "flip"
        });
    });
});

謝謝。

Answer 1

您可以通過樣式表的類設置微調器CSS靜態零件，並在激活工具提示時重新定義它。 或者，可以將“超時”作為mousemove函數內代碼的條件進行檢查，也可以將其他類設置為mousemove函數執行的條件。 有很多解決方案可以解決您的問題。