How to Trigger Bootstrap Dropdowns on Hover?

Triggering Bootstrap Dropdown Menus on Hover

This question seeks to modify Bootstrap dropdowns to trigger on hover instead of by clicking. While the built-in configuration does not provide this functionality, there is a simple solution using CSS.

To achieve this, add the following CSS rule to your code:

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

This rule specifies that when the mouse hovers over a dropdown element, its corresponding dropdown menu should be displayed. The margin-top: 0; property ensures that there is no gap between the dropdown menu and its parent element.

By implementing this CSS rule, your Bootstrap dropdowns will be triggered by hovering over them, providing a more intuitive and user-friendly experience.

The above is the detailed content of How to Trigger Bootstrap Dropdowns on Hover?. For more information, please follow other related articles on the PHP Chinese website!