Bootstrap 4 es un marco CSS de código abierto que se utiliza para el desarrollo frontend de aplicaciones web. Bootstrap junto con HTML y Javascript enriquecen la interfaz de usuario para una mejor experiencia de usuario. jQuery es un marco de Javascript que se utiliza para ejecutar funciones de Javascript. jQuery tiene funcionalidades similares a javascript pero la única diferencia es que jQuery incluye menos líneas de código. Usando jQuery y CSS, podemos escribir un código que demuestre la adición de una clase activa cuando el cursor se desplaza sobre el elemento de la lista y la subsiguiente eliminación de la clase activa cuando el cursor se mueve hacia afuera.
- Primer enfoque: en el primer enfoque, usamos el método hover() de jQuery. El método hover() activa o registra los eventos mouseenter y mouseleave. El método hover() toma dos funciones como parámetro. El primer parámetro es la función que debe activarse cuando el mouse ingresa al elemento seleccionado y el segundo parámetro es la función que debe ejecutarse cuando el mouse abandona el elemento seleccionado. El primer parámetro es obligatorio mientras que el segundo parámetro es opcional. En este ejemplo, especificamos solo la infunción. Si solo se especifica una función, se ejecuta para los eventos mouseenter y mouseleave. Además, el método toggleClass() alterna la clase activa, es decir, agrega la clase activa si no está presente en el elemento <li>; de lo contrario, elimina la clase activa.
Sintaxis:
hover(infunction, outfunction)
Ejemplo:
<!DOCTYPE html><html><head><!-- CSS only --><linkrel="stylesheet"href=integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"crossorigin="anonymous"/><!-- JS, Popper.js, jquery --><scriptsrc=integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc=integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"crossorigin="anonymous"></script><scriptsrc=integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"crossorigin="anonymous"></script><!--CSS stylesheet--><styletype="text/css">.active,li:hover {color: red;}</style></head><body><ul><!--list items without theactive class initially--><liclass="li">Item 1</li><liclass="li">Item 2</li><liclass="li">Item 3</li></ul><!-- javascript function to add the activeclass to list when hovered over --><scripttype="text/javascript">$(".li").hover(function() {//toggleClass() switches the active class$(this).toggleClass("active");});</script></body></html>Producción
Explicación: La salida se comprueba en la consola del navegador web. A medida que el cursor se desplaza sobre el elemento de la lista, vemos la clase activa agregada al elemento de la lista en la consola. A medida que el cursor se desplaza, la clase activa se elimina del elemento recientemente desplazado y se agrega al elemento siguiente.
- Segundo enfoque: en el segundo enfoque, agregamos la función out para indicar un elemento que ya está en la lista. Aquí, la clase activa se agrega en mouseenter y se elimina en mouseleave. A medida que se activa el evento mouseleave, la clase visitada se agrega al elemento de la lista visitada recientemente.
<!DOCTYPE html><html><head><!-- CSS only --><linkrel="stylesheet"href=integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"crossorigin="anonymous"/><!-- JS, Popper.js, jquery -->integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc=integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"crossorigin="anonymous"></script><scriptsrc=integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"crossorigin="anonymous"></script><!--CSS stylesheet--><styletype="text/css">.active,li:hover {color: red;}.visited {color: violet;}</style></head><body><ul><!--list items without theactive class initially--><liclass="li">Item 1</li><liclass="li">Item 2</li><liclass="li">Item 3</li></ul><!-- javascript function to add the activeclass to list when hovered over --><scripttype="text/javascript">$(".li").hover(function() {//toggleClass() switches the active class$(this).toggleClass("active");},function() {$(this).addClass("visited");});</script></body></html>Producción
Explicación: La salida se comprueba en la consola del navegador web. A medida que el cursor se desplaza sobre el elemento de la lista, vemos que la clase activa se agrega al elemento de la lista 2 en la consola. Además, el elemento de la lista 1 se visitó anteriormente y, por lo tanto, se le agrega la clase visitada y el color del elemento se vuelve violeta según las especificaciones de la clase visitada en la hoja de estilo CSS.
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA