jQuery hoverIntent插件在父悬停时显示/隐藏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

在按钮和#displayDiv 周围粘贴另一个div #wrapperDiv 并将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>