Elementor 原子化元素（Atomic Tabs）如何实现鼠标悬停切换（Hover）？完整教程

随着 Elementor 新版 Atomic Elements（原子化元素） 的推出，越来越多的网站开始使用新的 Atomic Tabs（选项卡） 组件。

不过，很多用户都会发现一个问题：

Atomic Tabs 默认只能点击（Click）切换，无法像很多高端企业官网一样，实现鼠标悬停（Hover）自动切换。

例如 Apple、HubSpot、Framer 等网站，鼠标移动到不同的 Tab 上，就会立即切换对应内容，整个交互更加流畅，也更符合现代网页设计趋势。
那么，Elementor Atomic Tabs 能不能实现 Hover 切换呢？
答案是：可以，而且无需修改 Elementor 核心文件。

为什么要使用 Hover 切换？

相比点击切换，鼠标悬停切换具有以下优势：

• 提高用户浏览效率
• 产品展示更加直观
• 增强页面交互体验
• 更符合现代 SaaS 网站设计风格
• 提升页面整体高级感

特别是在展示：

• 产品分类
• 服务介绍
• 企业优势
• 案例展示
• 图片切换

这些模块时，Hover Tabs 的体验通常会比 Click Tabs 更自然。

Atomic Tabs 的工作原理

新版 Elementor Atomic Tabs 与旧版 Tabs 小工具完全不同。
Atomic Tabs 的 HTML 结构大致如下：

<button data-e-type="e-tab" role="tab" aria-selected="false"> </button>

每一个 Tab 本质上都是一个 <button>。
点击按钮时，Elementor 内部会更新：

• 当前激活状态
• aria-selected
• 内容区域
• 动画效果

因此，我们无需研究 Elementor 内部代码，只需要模拟一次点击即可完成切换。

最简单的 Hover 实现

最基础的方法就是监听鼠标移入事件。

document.querySelectorAll('[data-e-type="e-tab"]').forEach(tab => { tab.addEventListener('mouseenter', function () { if (this.getAttribute('aria-selected') !== 'true') { this.click(); } }); });

这样，当鼠标进入 Tab 时，就会自动执行一次点击，从而实现 Hover 切换。
整个过程仍然使用 Elementor 自己的切换逻辑，因此兼容性非常高。

推荐使用的完整版本（生产环境）

如果直接鼠标进入就立即切换，当用户快速划过多个 Tab 时，页面可能会不停切换，体验并不好。
因此，更推荐下面这套代码。

它增加了：

• 防止重复绑定事件
• Hover 延迟切换
• 支持 Elementor AJAX 加载
• 支持动态生成的 Atomic 元素

如果你想针对某个Tab

查询到当前TAB的HTML
data-id="4151fbe"

document.addEventListener("DOMContentLoaded", function () {

    const tabs = document.querySelectorAll(
        '[data-id="4151fbe"] [data-e-type="e-tab"]'
    );

    tabs.forEach(tab => {

        let timer;

        tab.addEventListener("mouseenter", function () {

            timer = setTimeout(() => {

                if (this.getAttribute("aria-selected") !== "true") {
                    this.click();
                }

            }, 80);

        });

        tab.addEventListener("mouseleave", function () {
            clearTimeout(timer);
        });

    });

});

如果你想全站所有 Atomic Tabs 都支持 Hover

(function () {

    function initHoverTabs() {

        document.querySelectorAll('[data-e-type="e-tab"]').forEach(tab => {

            if (tab.dataset.hoverInit) return;
            tab.dataset.hoverInit = "1";

            let timer;

            tab.addEventListener("mouseenter", function () {

                timer = setTimeout(() => {

                    if (this.getAttribute("aria-selected") !== "true") {
                        this.click();
                    }

                }, 100);

            });

            tab.addEventListener("mouseleave", function () {
                clearTimeout(timer);
            });

        });

    }

    initHoverTabs();

    new MutationObserver(initHoverTabs).observe(document.body, {
        childList: true,
        subtree: true
    });

})();

相比简单版本，这套代码更加稳定，也更适合正式网站使用。

为什么要使用 MutationObserver？

很多人第一次写 Hover Tabs 时都会这样写：

document.addEventListener('DOMContentLoaded', function () { });

这种写法对于普通页面没有问题。
但是 Elementor 的很多组件并不是页面加载时一次性生成，而是在后续通过 JavaScript 动态创建，例如：

• Popup（弹窗）
• Loop Grid
• AJAX 内容
• 动态模板
• Atomic Components

如果只在 DOMContentLoaded 时绑定事件，新生成的 Tabs 就不会拥有 Hover 功能。
因此，使用 MutationObserver 可以监听页面变化，只要页面新增了 Atomic Tabs，就会自动绑定 Hover 事件。
兼容性更好，也更加稳定。

建议增加 Hover 延迟

很多国外优秀的网站并不会在鼠标刚进入 Tab 时立即切换，而是会等待 100~200 毫秒。
例如：
},100);
可以改成：
},180);
或者：
},200);
这样可以有效避免：
鼠标快速划过多个 Tab
页面频繁闪烁
用户误触
整体交互会更加自然。

代码应该放在哪里？

可以放到以下任意位置：

• Elementor → 自定义代码（Footer）
• 子主题 JS 文件
• Code Snippets 插件
• 主题页脚自定义 JS

由于整个方案没有修改 Elementor 核心文件，因此即使 Elementor 升级，也不会影响代码正常运行。