加载工具提示时鼠标光标旁边的旋转图标（jQuery）

Question

我有一个特殊的情况，我想在鼠标光标旁边显示一个旋转加载图标。

当用户将鼠标悬停在div 上时，将显示此图标。然后将在延迟 1300ms 后显示一个工具提示。旋转图标将在工具提示延迟时显示，然后在工具提示显示后隐藏。

我已经使用jquery-ui .position extension 编写了一些代码，并且已经实现了我所需要的。但是，一旦显示工具提示并且旋转图标消失，当我移动鼠标光标时它会立即返回。我希望图标永久消失，直到鼠标移出 div。

---

举例： 我创建了一个jsfiddle of this scenario。

将鼠标光标悬停在Product Info Container 上。您将看到旋转图标出现，1300 毫秒后，工具提示将显示，旋转图标将消失。但是一旦你再次移动鼠标，图标又回来了。

---

一旦显示工具提示，无论我是否移动鼠标，如何才能永久隐藏旋转图标？

我目前的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 函数执行的条件。有很多解决方案可以解决您的问题。