Question

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

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

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

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

将鼠标光标悬停在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静态部件，并在工具提示变为活动状态时重新定义它。或者您可以将“timeout”作为mousemove函数内部代码的条件进行检查，也可以将其他类设置为mousemove函数执行的条件。有很多解决方案可以解决你的问题。

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

1 个答案: