jQuery hoverIntent插件在父悬停时显示/隐藏div，但是在悬停时继续显示

问题描述

我有一个按钮，将鼠标悬停在(鼠标悬停)下方时会显示一个div.当鼠标悬停(鼠标移开)时，div消失.

I have a button that when hovered over (mouseover) displays a div right below it. When hovered away (mouseout), the div disappears.

这一切都很好并且很好，但是现在我需要将div保持在按钮下方，以显示用户是否将鼠标悬停在该div上(以便与div中的内容进行交互).

This all works well and nicely, but now I need to keep the div below the button showing if user hovers over that div (to interact with the content inside the div).

现在这是不可能的，因为当您将鼠标悬停在触发div显示的按钮之后，div会立即消失.

Right now this is not possible since the div will disappear immediately after you hover away from the button that triggers the div to display.

我正在使用 hoverIntent jQuery插件来完成此操作.

I'm using the hoverIntent jQuery Plugin to accomplish this.

// 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>

推荐答案

在按钮和#displayDiv上粘贴另一个div #wrapperDiv，并将hoverIntent附加到#wrapperDiv而不是按钮上:

Stick another div #wrapperDiv around both the button and the #displayDiv and attach hoverIntent to #wrapperDiv rather than the button:

$('#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>

这篇关于jQuery hoverIntent插件在父悬停时显示/隐藏div，但是在悬停时继续显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！