Dropdown with Hover in Bootstrap

Problem

So, what I’m looking for is quite basic.

I created a navbar with dropdown menus (class=”dropdown-toggle” data-toggle=”dropdown”), and it works perfectly.

The problem is that it functions “onClick,” when I’d prefer it to work “onHover.”

Is there a way to do this that comes with the software?

Asked by Dr.Kameleon

Solution #1

CSS would be the simplest solution. Something along the lines of…

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; // remove the gap so it doesn't close
 }

Working Fiddle

Answered by brbcoding

Solution #2

The simplest method is to use a hover to trigger the bootstrap click event. It should still be touch device friendly this way.

$('.dropdown').hover(function(){ 
  $('.dropdown-toggle', this).trigger('click'); 
});

Answered by Mark Williams

Solution #3

The hover function in jQuery can be used.

You only need to add the class open when the mouse enters the dropdown and delete it when the mouse exits.

Here’s my code:

$(function(){
    $('.dropdown').hover(function() {
        $(this).addClass('open');
    },
    function() {
        $(this).removeClass('open');
    });
});

Answered by adhi

Solution #4

This is a simple method to do it with jQuery:

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

Answered by Biagio Chirico

Solution #5

When you additionally click on CSS, things goes nuts. This is the code I’m using, and it doesn’t change anything on mobile.

$('.dropdown').mouseenter(function(){
    if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
        if(!$(this).hasClass('open')) { // Keeps it open when hover it again
            $('.dropdown-toggle', this).trigger('click');
        }
    }
});

Answered by user1079877

Post is based on https://stackoverflow.com/questions/16214326/bootstrap-dropdown-with-hover