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.
