Question

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>

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