加载工具提示时鼠标光标旁边的旋转图标 (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

您可以通过 style-sheet 的 class 设置微调器 css 静态部分，并在工具提示激活时重新定义它。或者您可以检查 "timeout" 作为 mousemove 函数内部代码的条件，或者您也可以设置额外的 class 作为 mousemove 函数执行的条件。有很多解决方案可以解决您的问题。

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

Spinning icon next to mouse cursor while tooltip is loading (jQuery)

javascript

jquery

position

jquery-ui

jquery-hover