Hoverintent / Hover Delay jQuery

Question

大家好，我正在尝试完成一些事情。

我有一个显示在鼠标上的元素，它本质上是一个子菜单，但是它的结构不像您的传统子菜单那样，因为它不在'li'元素内。 我想做的是，当用户将鼠标悬停在“产品”上时，将显示子导航-可以正常工作。 但是，当用户将鼠标从“产品”移动到子导航菜单本身时，我希望子菜单保留并且不消失，直到两个元素（a＃products和＃banner-top）都不再具有鼠标悬停。

我目前正在使用hoverintent来完成此操作，因为听起来这很适合我的目的。 我的印象是，只要用户仍将鼠标悬停在.hoverintent所附加的元素之一上，就不会调用“ out”。 我还假设，即使用户将触发“＃product-sub-nav”的初始元素悬停在短时间内显示的初始元素上，也不会触发“ out”。 换句话说，用户将鼠标悬停在子菜单显示的“产品”上，然后用户在短时间内将鼠标悬停在子菜单上，因此不会触发将“隐藏”类附加到子导航的功能以再次将其隐藏。 我希望我在解释自己想做的事情上做得不错。

这是我的代码

    var settings = {
                sensitivity: 4,
                interval: 75,
                timeout: 500,
                over: mousein_trigger,
                out: mouseout_trigger
            };

            jQuery('.item-134 a, #product-sub-nav').hoverIntent(settings);

            function mousein_trigger() {
                jQuery('#banner-top').removeClass('hidden')
            }
            function mouseout_trigger() {
                jQuery('#banner-top').addClass('hidden')
            }

带有JS格式的更新

http://jsfiddle.net/M5BN2/

Answer 1

我只是想更新它，以防其他人遇到类似问题。 该解决方案非常有效： https : //stackoverflow.com/a/1670561/1108360

jQuery(".item-134 a, #banner-top").mouseenter(function() { //if mouse is over 'products' link or submenu
                //clear timeout
                clearTimeout(jQuery(this).data('timeoutId'));
                //display sub menu
                jQuery('#banner-top').removeClass('hidden');
            }).mouseleave(function() { //when mouse leaves element
                timeoutId = setTimeout(function() {
                    //delay hiding sub menu
                    jQuery('#banner-top').addClass('hidden');
                }, 650);
                //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
                jQuery(".item-134 a, #banner-top").data('timeoutId', timeoutId);
            });

没有正确更新JSfiddle： http : //jsfiddle.net/M5BN2/5/