Abrir acordeón de Elementor al pasar el mouse en lugar de hacer clic

En este tutorial, aprenderás cómo abrir el acordeón de Elementor al pasar el mouse en lugar de hacer clic, de una forma fácil y sencilla. Esto funciona tanto para el nuevo como para el antiguo widget de acordeón de Elementor.

En este tutorial, aprenderás cómo abrir el acordeón de Elementor al pasar el mouse en lugar de hacer clic, de una forma fácil y sencilla. Esto funciona tanto para el nuevo como para el antiguo widget de acordeón de Elementor.

Primero agrega el widget de HTML de Elementor

Agrega el código a continuación en un elemento HTML, en la misma página en la que tienes el widget acordeón de Elementor.

<script>
/* Code from https://element.how/elementor-open-accordion-hover/
* Version 1.0
* Copyright 2023 Element.How
*/
document.addEventListener('DOMContentLoaded', function () {
let hoverAccordion = document.querySelectorAll('.hoverAccordion .e-n-accordion-item-title, .hoverAccordion .elementor-tab-title');
hoverAccordion.forEach((item) => {
item.addEventListener('mouseenter', () => {
if (item.getAttribute('aria-expanded') == 'false' || (item.classList.contains('elementor-tab-title') && !item.classList.contains('elementor-active'))) {
item.click();
}
});
});
});
</script>

Luego, agrega el nombre de la clase hoverAccordion al widget de acordeón de Elementor.

Asigna a tu widget de acordeón el nombre de clase hoverAccordion en Avanzado > Clases CSS.

Eso es todo, así de fácil puedes activar el efecto hover sobre las pestañas del acordeón de Elementor, para activarlos sin necesidad de hacer clic en cada pestaña.

Este sitio web utiliza enlaces de referidos para recomendar productos o servicios. Esto significa que si decides realizar una compra a través de estos enlaces, podríamos recibir una compensación monetaria.

Facebook
Twitter
LinkedIn
WhatsApp
0 0 votos
Calificar artículo
Suscribirme
Notificarme
guest

0 Comentarios
Comentarios en línea
Ver todos los comentarios

FAQ's

Si aún tiene dudas, lo invitamos a revisar nuestras preguntas frecuentes sobre nuestros servicios.

Diseño Web & Desarrollo

¿No encuentra la respuesta que busca para su sitio web? ¡Compartimos algunas de nuestras preguntas más frecuentes para ayudarlo!

Branding & Diseño Gráfico

¿Quiere un logotipo, una ilustración o un diseño pero no puede encontrar la respuesta que está buscando? Eche un vistazo a nuestras preguntas frecuentes.

Marketing Digital

¿Estás listo para impulsar tu negocio pero no encuentras la respuesta que estás buscando? Echa un comentario a nuestras preguntas frecuentes.