Bootstrap on hover button dropdown menu

Question

I want dropdown-menu to appear on mouse hover. Here is jsbin of my code: link

Tried jquery:

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

But it is not working...

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

In Bootstrap Dropdown with Hover this is fixed using CSS instead of JavaScript. If you change the solution of the accepted answer into

.navbar .btn-group:hover > .dropdown-menu {
    display: block;
}

it should work with your example code.

edited May 23 '17 at 12:27

Community

1
1

answered Dec 06 '14 at 10:25

ckuijjer

13,293
3
40
45

But dropdown menu is disappearing – Vaibhav Jain Dec 06 '14 at 10:28
Good point :D! I've changed the CSS to look at the `.btn-group` instead of the `button` as the `.btn-group` contains both the button and the dropdown-menu. the `>` is needed as there is another `.btn-group` around all buttons, so without it hovering any button would open all menu's :) – ckuijjer Dec 06 '14 at 10:33

score 0 · Answer 2 · answered Dec 06 '14 at 10:26

0

You can use inner Bootstrap API:

$(document)
   .on('hover', '.dropdown-toggle', Dropdown.prototype.toggle)

answered Dec 06 '14 at 10:26

saNs

147
7

score 0 · Answer 3 · answered Dec 06 '14 at 10:39

Try this

jQuery(function ($) {
    $('.navbar .dropdown').hover(function () {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
    }, function () {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
    });
    $('.navbar .dropdown > a').click(function () {
        location.href = this.href;
    });
});

Bootstrap on hover button dropdown menu

3 Answers3