如何在 Bootstrap 中悬停时打开下拉菜单？

原文:https://www . geesforgeks . org/如何打开-下拉菜单-悬停在引导中/

以下是在引导中悬停时打开下拉菜单的任务。鼠标悬停时的下拉菜单可以使用以下方法完成。

  1. Using the jQuery hover() method: It is used to specify two functions to start when mouse pointer move over the selected element.

    语法:

    html $(selector).hover(Function_in, Function_out);

    进场:

    • 。悬停()方法用于处理鼠标进入事件的发生
    • 使用存储所选元素的所有直接子元素。小儿()法。
    • 使用检查元素是否可见。是(":可见")法。
    • 使用显示元素。toggleClass(“打开”)方法。

    示例:

    ```html <!DOCTYPE html>

             How to open dropdown menu        on hover in Bootstrap

                   

            .bs-example {             margin: auto;             width: 25%;         }

    @media screen {             .dropdown:hover .dropdown-menu,             .btn-group:hover .dropdown-menu {                 display: block;             }             .dropdown-menu {                 margin: auto;             }             .dropdown-toggle {                 margin: auto;             }             .navbar .dropdown-toggle,             .nav-tabs .dropdown-toggle {                 margin: auto;             }         }     

        
            

                  GeeksforGeeks          

                

                How to open dropdown menu on hover in Bootstrap         

                
                                                      
                
            
                         $(document).ready(function() {                 $(".dropdown, .btn-group").hover(function() {                     var dropdownMenu =                          $(this).children(".dropdown-menu");                     if (dropdownMenu.is(":visible")) {                         dropdownMenu.parent().toggleClass("open");                     }                 });             });              

    ```

    输出: 将鼠标移至下拉菜单前: 将鼠标移至下拉菜单后:

  2. Using the CSS property Section of code to be used in the program

    html .dropdown:hover .dropdown-menu { display: block; }

    示例:

    ```html <!DOCTYPE html>

        How to open dropdown        menu on hover in Bootstrap                                   .bs-example {             margin: auto;             width: 25%;         }

    .dropdown:hover .dropdown-menu {             display: block;         }     

        
            
                

                  GeeksforGeeks               

                

    How to open dropdown menu on hover in Bootstrap              

                
                                 
            
        

    ```

    输出: 将鼠标移至下拉菜单前: 将鼠标移至下拉菜单后:

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/6813.html