CODEWITHSUNDEEP
jqueryhoverintent
IntricatePixels
IntricatePixels

Reputation: 1229

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

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>

Upvotes: 0

Views: 3867

Answers (1)

David Tang
David Tang

Reputation: 93684

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>

Upvotes: 1

Related Questions