Hover Effect On Bootstrap Navigation Using jQuery

Bootstrap framework by default, when clicked on the parent navigation menu, only shows the child menu. So, we can say that, the hover effect does not apply to the bootstrap navigation by default as it was built so. So, you have came here for the solution on this issue, right? Well, you have landed about in the right place to get the solution on this feature.

You have added the Bootstrap framework to your HTML project, and then you have created the menu and then you hovered over the menu to see if it works and could not see the child menu or sub menu at all. In order to apply the hover effect on the bootstrap navigation, you have to implement either the CSS rule or the jQuery rule properly in your project. Here, we have described about how to create the hover effect in bootstrap using the jQuery library, which is given below:

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

The above method is one of the method on gaining the hover effect on the bootstrap navigation. Here, above what is done is, on the hover over the parent menu, the class of open is added and on of the hover, that class added is removed. Hence, you can see that the hover effect is working properly on the bootstrap navigation.

Similarly, there is other way of displaying the bootstrap navigation menu on hover using the jQuery script, which is given below:

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

Here, in the code code, what is done is when you hover over the parent menu, then, it will search for the first class of .dropdown-menu and if finds it, then, adds the fadeIn effect in the sub-menu, ie, displays slowly and also applied oppositely when hovered out, ie, fadeOut on out of hover making the sub-menu in bootstrap navigation work properly.

So, where to add the above provided code in your HTML project? The answer to this would be, you can add the above code to your custom JavaScript file of the project and see that the above both of the code will work perfectly without needing to do any extra steps at all to make that happen in your project.

By implementing any method described above, you can hover to the parent menu item and then, the function calls to the specific CSS class and then, there will be the display of the child menu by only hovering to the parent menu. So, clicking on to the parent menu to see the child menu is now no longer needed for the bootstrap navigation, after you have applied any one of the above method in your HTML project.