¿Cómo abrir el menú desplegable al pasar el mouse en Bootstrap?

Aquí está la tarea para abrir el menú desplegable al pasar el mouse en Bootstrap. El menú desplegable al pasar el mouse se puede hacer usando los siguientes métodos.

Usando el método jQuery hover() : se usa para especificar dos funciones para comenzar cuando el puntero del mouse se mueve sobre el elemento seleccionado.

Sintaxis:

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

Acercarse:

El método .hover() se usa para abordar la ocurrencia del evento mouseenter
Almacene todos los hijos directos del elemento seleccionado usando el método .children() .
Verifique los elementos si están visibles o no usando el método .is («: visible») .
Los elementos se muestran usando el método .toggleClass(“open”) .

Ejemplo :

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>How to open dropdown menu 
      on hover in Bootstrap</title>
  
    <link rel="stylesheet" 
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
  </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
  
    <style type="text/css">
        .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;
            }
        }
    </style>
</head>
  
<body>
    <center>
        <div class="container">
  
            <h1 style="text-align:center;color:green;"> 
            GeeksforGeeks 
        </h1>
            <h3>
            How to open dropdown menu on hover in Bootstrap
        </h3>
            <div class="bs-example">
                <!--Tabs with dropdown menu-->
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Login</a></li>
                    <li><a href="#">SignUp</a></li>
                    <li class="dropdown">
                        <a href="#"
                           data-toggle="dropdown" 
                           class="dropdown-toggle">
                          Menu 
                          <b class="caret"></b>
                      </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Algorithm</a></li>
                            <li><a href="#">Gate</a></li>
                            <li><a href="#">Languages</a></li>
                            <li><a href="#">Interview</a></li>
                            <li><a href="#">Subject</a></li>
                        </ul>
                    </li>
                </ul>
                <hr>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".dropdown, .btn-group").hover(function() {
                    var dropdownMenu = 
                        $(this).children(".dropdown-menu");
                    if (dropdownMenu.is(":visible")) {
                        dropdownMenu.parent().toggleClass("open");
                    }
                });
            });
        </script>
    </center>
</body>
  
</html>

Salida:
Antes de mover el mouse al menú desplegable:

Después de mover el mouse al menú desplegable:

Uso de la propiedad CSS
Sección de código que se utilizará en el programa

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

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>How to open dropdown 
      menu on hover in Bootstrap</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
          rel="stylesheet" />
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
  </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
    <style type="text/css">
        .bs-example {
            margin: auto;
            width: 25%;
        }
          
        .dropdown:hover .dropdown-menu {
            display: block;
        }
    </style>
</head>
  
<body>
    <center>
        <div class="container">
            <h1 style="text-align:center;color:green;">
              GeeksforGeeks 
             </h1>
            <h3>How to open dropdown menu on hover in Bootstrap
             </h3>
            <div class="bs-example">
                <ul id="nav"
                    class="nav nav-pills clearfix right" 
                    role="tablist">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Login</a></li>
                    <li><a href="#">SignUp</a></li>
                    <li class="dropdown">
                        
                      <a href="#"
                         class="dropdown-toggle" 
                         data-toggle="dropdown">
                        Menu
                      </a>
                        
                        <ul id="products-menu" 
                            class="dropdown-menu clearfix" 
                            role="menu">
                            <li><a href="">Algo</a></li>
                            <li><a href="">Gate</a></li>
                            <li><a href="">Subject</a></li>
                            <li><a href="">Practise</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </center>
</body>
  
</html>

Salida:
Antes de mover el mouse al menú desplegable:

Después de mover el mouse al menú desplegable:

Publicación traducida automáticamente

Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta