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

- Link: https://creativa.dev/wordpress/abrir-acordeon-de-elementor-al-pasar-el-mouse-en-lugar-de-hacer-clic/
- Published: 2024-03-13T18:25:16-04:00
- Author: Juanito Ortega

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.

![](https://www.creativa.dev/wp-content/uploads/2024/03/elementor_add_html_element_2.
png)

    ```wp-block-code
    <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.

![](https://www.creativa.dev/wp-content/uploads/2024/03/Pasted-18.webp)

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.