jQuery hoverIntent Plugin在父級懸停上顯示/隱藏div，但在繼續顯示時保持顯示

Question

我有一個按鈕，當鼠標懸停在上方時（鼠標懸停）在其下方顯示一個div。當離開時（鼠標移出），div消失。

這一切工作正常，很好，但現在我需要保持div下面的按鈕顯示，如果用戶懸停在該div（與div內的內容進行交互）。

現在這是不可能的，因爲div會在觸發div顯示的按鈕懸停後立即消失。

我正在使用hoverIntent jQuery插件來完成此操作。

// This is the button that when hovered 
// triggers the div below it to show 
$('#hoverMeToShowHideDiv').hoverIntent(function() { 

$("#displayDiv").stop().slideDown('slow'); 
}, 
function() { 
    // I don't want the div to hide if user hovers over it 
    $("#displayDiv").stop().slideUp('slow'); 
}); 

的HTML：

<div id="hoverMeToShowHideDiv"> // some stuff </div> 
<div id="displayDiv"> 
    // some other stuff that I want to 
    // keep showing if users hover over it 
</div> 

Answer 1

棒另一個DIV #wrapperDiv左右兩個按鈕和#displayDiv，重視hoverIntent到#wrapperDiv而非按鈕：

$('#wrapperDiv').hoverIntent(function() { 
    $("#displayDiv").stop().slideDown('slow'); 
}, 
function() { 
    // I don't want the div to hide if user hovers over it 
    $("#displayDiv").stop().slideUp('slow'); 
}); 

HTML：

<div id="wrapperDiv"> 
    <div id="hoverMeToShowHideDiv"> // some stuff </div> 
    <div id="displayDiv"> 
     // some other stuff that I want to 
     // keep showing if users hover over it 
    </div> 
</div>