鼠标悬停的棘手延迟

Posted 2023-02-22

【中文标题】鼠标悬停的棘手延迟

【英文标题】：Tricky delay on mouseover

【发布时间】：2010-12-03 09:27:17

【问题描述】：

这是我目前拥有的：

$("#cart-summary").mouseenter(function () 
    $('.flycart').delay(500).slideDown('fast');
);
$(".flycart").mouseleave(function () 
    $('.flycart').delay(500).slideUp('fast');
).find('a.close').click(function()
   $(this).parents('.flycart').hide();
);

它的作用是：

如果鼠标悬停 #cart-summary -> 500 毫秒后打开 flycart

如果 mouseout .flycart -> 500ms 后关闭 flycart

我需要的是：

如果鼠标悬停在 #cart-summary 至少 500 毫秒 -> 打开 flycart

如果 mouseout .flycart for ATLEAST 500ms -> 关闭 flycart

Edited to Add：我也使用hoverIntent，如果可以在这里使用吗？

非常感谢！

【参考方案1】：

提供解决方案

var mouseenterTimerCart;
var mouseleaveTimerCart;

$(document).on(
    mouseenter: function () 
        if (mouseleaveTimerCart) clearTimeout(mouseleaveTimerCart);
        mouseenterTimerCart = setTimeout(function() 
            $("#head-cart .cart_items").show()
        , 500);
    ,
    mouseleave: function () 
        if (mouseenterTimerCart) clearTimeout(mouseenterTimerCart);
        mouseleaveTimerCart = setTimeout(function() 
            $("#head-cart .cart_items").hide()
        , 500);
    
, "#head-cart .full, #head-cart .cart_items");

如果购物篮动态更新，将起作用

$("#head-cart").html(...crat-html-block...)

【参考方案2】：

使用 setTimeout 检查您设置/取消设置的标志（我正在使用类）是否仍然有效。

$("#cart-summary").mouseenter(function () 
    $("#cart-summary").addClass("hasFocus");
    setTimeout(function() 
        if ($("#cart-summary").hasClass("hasFocus")) 
            $('.flycart').slideDown('fast');
        
      , 500 );
      );

$("#cart-summary").mouseleave(function () 
    $("#cart-summary").removeClass("hasFocus");
);


$(".flycart").mouseenter(function () 
    $("#cart-summary").removeClass("lostFocus");    
);

$(".flycart").mouseleave(function () 
    $("#cart-summary").addClass("lostFocus");
    setTimeout(function() 
        if ($("#cart-summary").hasClass("hasFocus"))  
            $('.flycart').slideUp('fast');
            ).find('a.close').click(function()
            $(this).parents('.flycart').hide();
        
    , 500)
);

【参考方案3】：

你可以这样做：

var timeout,
    $flycart = $(".flycart"),
    $summary = $("#cart-summary"),
    delay = 500;

$summary.mouseenter(function () 
    if (timeout) window.clearTimeout(timeout);
    timeout = window.setTimeout(function()
        if ( $flycart.is(":visible") ) 
            $flycart.slideDown('fast');
        
    , delay);
);
$flycart.mouseleave(function () 
    if (timeout) window.clearTimeout(timeout);
    timeout = window.setTimeout(function()
        if ( $flycart.is(":visible") ) 
            $flycart.slideUp('fast');
        
    , delay);
)...

【参考方案4】：

您可以使用hoverIntent插件如下：

var config =     
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
     interval: 500, // number = milliseconds for onMouseOver polling interval    
     timeout: 500, // number = milliseconds delay before onMouseOut    
;

$(".flycart").hoverIntent(function () 
        $('.flycart').slideDown('fast');
, function() 
        $('.flycart').slideUp('fast');
).find('a.close').click(function()
   $(this).parents('.flycart').hide();
);

【参考方案5】：

听起来您可能需要HoverIntent 插件。

我不知道它是否会帮助您解决鼠标悬停至少 500 毫秒。但也许那里有一个选项。

【讨论】：

在这里找到了一个类似的请求：***.com/questions/1482029/…，但如果可能的话，我想使用 hoverIntent。