宾语;块。功能;悬停它会滑落。将幻灯片悬停在外面，不要隐藏它。 （预先编译的脚本）

Question

我现在正忙着做什么。

该对象是一个购物车块，当悬停时，会通过滑动对象显示购物车的内容。

当你将鼠标悬停在其上时，它会向上滑动，这很好。但当我将这个滑落的物体徘徊时，没有任何事情发生，这对顾客来说非常令人沮丧。

我尝试了下面代码的许多变体，但似乎我无法指出它。

PS：我是JavaScript的新手，清楚完整的解释将非常受欢迎。

$(document).ready(function(){
    // expand/collapse management
    $('#block_cart_collapse').click(function(){
        ajaxCart.collapse();
    });
    $('#block_cart_expand').click(function(){
        ajaxCart.expand();
    });
    ajaxCart.overrideButtonsInThePage();
    ajaxCart.refresh();


    /* roll over cart */
    var cart_block = new HoverWatcher('#cart_block');
    var shopping_cart = new HoverWatcher('#shopping_cart');

    $("#shopping_cart a:first").hover(
        function() {
            $(this).css('border-radius', '3px 3px 0px 0px');
            if (ajaxCart.nb_total_products > 0)
                $("#cart_block").stop(true, true).slideDown(800);
        },
        function() {
            $('#shopping_cart a').css('border-radius', '3px');
            setTimeout(function() {
                if (!shopping_cart.isHoveringOver() && !cart_block.isHoveringOver())
                    $("#cart_block").stop(true, true).slideUp(800);
            }, 200);
        }
    );

    $("#cart_block").hover(
        function() {
            $('#shopping_cart a').css('border-radius', '3px 3px 0px 0px');
        },
        function() {
            $('#shopping_cart a').css('border-radius', '3px');
            setTimeout(function() {
                if (!shopping_cart.isHoveringOver())
                    $("#header #cart_block").stop(true, true).slideUp(450);
            }, 200);
        }
    );


    $('.delete_voucher').live('click', function() {
        $.ajax({url:$(this).attr('href')});
        $(this).parent().parent().remove();
        if ($('body').attr('id') == 'order' || $('body').attr('id') == 'order-opc')
        {
            if (typeof(updateAddressSelection) != 'undefined')
                updateAddressSelection();
            else
                location.reload();
        }
        return false;
    });
});

Answer 1

删除.hover处理程序中的第二个函数声明。像这样：

$("#shopping_cart a:first").hover(
    function() {
        $(this).css('border-radius', '3px 3px 0px 0px');
        if (ajaxCart.nb_total_products > 0)
            $("#cart_block").stop(true, true).slideDown(800);

        // LINE REMOVED //

        $('#shopping_cart a').css('border-radius', '3px');
        setTimeout(function() {

            // THIS LINE WILL DISPLAY A POPUP IF THE TIMEOUT IS CALLED //
            alert("IF YOU SEE THIS, .isHoveringOver() is the problem");  

            if (!shopping_cart.isHoveringOver() && !cart_block.isHoveringOver())
                $("#cart_block").stop(true, true).slideUp(800);
        }, 200);
    }
);    

Answer 2

感谢@ Askanison4的诀窍， 我添加了提议的行，遗憾的是，是否存在问题;弹出窗口出现。

但是，我找到了一个很好的解决方法，而不是hoverout，

$(document).click(function() {
     $('#cart_block').fadeOut(300);
});

所以，至少，客户可以点击关闭滑动对象，非常烦人。

我会保持这个帖子打开，好像有人找到了悬停问题的解决方案，但我现在非常满意。

再次感谢!!!