Hoverintent/Hover Delay jQuery

Question

大家好，我正在努力完成一些事情。

我有一个显示一个鼠标的元素，它本质上是一个子菜单，但它不像传统的子菜单那样构造，它不在'li'元素内。我试图做的是，当用户将鼠标悬停在“产品”上时，会显示subnav - 这种方式没有问题。但是，当用户将鼠标从“产品”移动到subnav菜单本身时，我希望子菜单保持不变，并且不会消失，直到两个元素（＃产品和＃横幅顶部）都不再具有鼠标悬停为止。

我目前使用hoverintent来实现这一点，因为它听起来像它会适合我的目的。我留下的印象是，只要用户仍然徘徊在hoverintent所附的其中一个元素上，就不会调用'out'。我还假定即使用户在短时间内徘徊触发'＃product-sub-nav'的初始元素以显示，只要他们在短时间内显示，'out'也不会触发。换句话说，用户将鼠标悬停在“产品”上的子菜单显示中，然后用户在短时间内悬停在子菜单上，因此不会触发将“隐藏”类附加到subnav以重新隐藏的功能。我希望我已经做了一个体面的工作来解释我想要做的事情。

这里是我的代码

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') 
      } 

UPDATE W/JS FIDDLE

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/