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/