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...
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.
.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 :)You can use inner Bootstrap API:
$(document)
.on('hover', '.dropdown-toggle', Dropdown.prototype.toggle)
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;
});
});
