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
=
<
script
src
=
</
script
>
<
script
src
=
</
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
=
rel
=
"stylesheet"
/>
<
script
src
=
</
script
>
<
script
src
=
</
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