Why does my hover button dropdown not stay open when I mouse-over?

Question

First things first: http://jsfiddle.net/9L81kfah/

I have a Bootstrap dropdown that's supposed to open and stay open if somebody does a mouse-over for more than 200ms, especially if they then move the mouse over the menu content, but it's not staying open. What am I doing wrong here?

This is the dropdown code:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

And the jQuery:

jQuery('#dropdownMenu1').hover(function() {
        jQuery(this).next('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
        jQuery(this).next('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

Don't forget to click the green check mark next to an answer if it helped you out :) — CatDadCode, Jun 16 '15 at 17:13

score 2 · Accepted Answer · edited May 23 '17 at 12:29

2

It's because your hover handler is on the button element and as soon as you mouseover the menu element the "mouseout" handler triggers because you left the button. Instead your handler should be on the surrounding .dropdown element.

$('.dropdown').hover(function () {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function () {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

Now when you're hovering the button it will work because the button is a child of the .dropdown element and the hover event bubbles up through the parent elements. When you move the mouse from the button to the dropdown menu you'll still be hovering over .dropdown as well because the menu too is a child of .dropdown. Only when you leave the parent element entirely will the "mouseout" handler fire.

http://jsfiddle.net/1xpLm4jw/

edited May 23 '17 at 12:29

Community

1
1

answered Jun 15 '15 at 20:46

CatDadCode

58,507
61
212
318

In that case the dropdown would not close if you mouse out of the element. – Sushanth -- Jun 15 '15 at 20:59
He said it was supposed to open and *stay* open. – CatDadCode Jun 15 '15 at 21:00
right.. So the menu will always be over when you hover over it the first time and leave it. – Sushanth -- Jun 15 '15 at 21:01
Ah yes I see the actual problem. I updated my answer. [This](http://jsfiddle.net/1xpLm4jw/) should do it. – CatDadCode Jun 15 '15 at 21:42

score 0 · Answer 2 · answered Jun 15 '15 at 20:47

You're telling your dropdown to fade out after you mouse off the button. Instead, you should tell it to fade out after you mouse off the entire dropdown group.

jQuery('#dropdownMenu1').hover(function() {
        jQuery(this).next('.dropdown-menu').stop(true, true).delay(200).fadeIn();
});
jQuery('.dropdown').on("mouseout", function() {
        jQuery('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});

score 0 · Answer 3 · answered Jun 15 '15 at 20:58

You would need to have a timer to get this working. Only trigger the fadeOut if the mouse is not over the dropdown. Simply put you can use the combination of mouseover and mouseout events.

var timeout;
jQuery('.dropdown').on('mouseover', function () {
    clearInterval(timeout);
    jQuery('.dropdown-menu', this).stop(true, true).delay(200).fadeIn();
});

jQuery('.dropdown').on('mouseout', function () {
    var thisView = this;
    timeout = setTimeout(function () {
        jQuery('.dropdown-menu', thisView).stop(true, true).delay(200).fadeOut();
    }, 200);
});

Check Fiddle

Why does my hover button dropdown not stay open when I mouse-over?

3 Answers3