jQuery hoverIntent Plugin show / hide div on parent hover, but keep showing when hovered

你离开我真会死。 提交于 2020-01-11 14:06:38

问题


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

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).

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.

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

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

回答1:


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>


来源:https://stackoverflow.com/questions/4485669/jquery-hoverintent-plugin-show-hide-div-on-parent-hover-but-keep-showing-when

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!