Elementor Tab 部件鼠标悬停切换内容的实现方法（兼容 3.30.0 版本）

在使用 Elementor 创建页面时，Tab（标签）部件是一种非常实用的内容展示方式，通常用户需要点击标签标题才能切换内容。然而，在某些展示型网站或交互性较强的场景中，我们更希望实现“鼠标悬停即切换标签内容”。

本文将手把手教你如何实现这一效果，特别是针对 Elementor 3.30.0 版本进行了适配与优化。

💡 需求说明

默认情况下，Elementor 的 Tab 小部件是“点击”切换内容。我们希望改为“hover 悬停切换内容”，也就是用户将鼠标移到标签标题上时，自动切换至对应的内容面板。

🔍 注意版本更新带来的类名变化

Elementor 在 3.30.0 版本中对 Tab 部件的 HTML 结构进行了调整：

因此我们需要相应地更新 JavaScript 选择器，以确保 hover 功能正常生效。

✅ 最终实现代码

🔸 第一步：插入以下自定义 JavaScript

你可以将这段代码添加到 Elementor 页面中的 HTML 部件，或通过主题的自定义代码区域添加到页面底部。

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const tabWrappers = document.querySelectorAll('.e-n-tabs');

    tabWrappers.forEach(wrapper => {
      const tabTitles = wrapper.querySelectorAll('.e-n-tab-title');
      tabTitles.forEach(title => {
        title.addEventListener('mouseenter', function () {
          if (!this.classList.contains('elementor-active')) {
            this.click(); // 模拟点击切换
          }
        });
      });
    });
  });
</script>

此代码监听鼠标 mouseenter 事件，当鼠标悬停在标签标题上时，自动触发 .click() 事件，实现内容切换。

🎨 第二步（可选）：添加切换动画效果（CSS）

为了让切换更平滑美观，可以给内容区域添加过渡动画效果：

.e-n-tab-content {
  transition: opacity 0.3s ease-in-out;
}

📌 实用场景推荐

• 产品功能模块对比
• 多语言介绍页
• 服务内容分类展示
• 企业文化板块展示

✅ 效果演示（思路）

假如你有如下结构的 Tab：

<div class="e-n-tabs">
  <div class="e-n-tab-title">标题一</div>
  <div class="e-n-tab-title">标题二</div>
  ...
  <div class="e-n-tab-content">内容一</div>
  <div class="e-n-tab-content">内容二</div>
</div>

实现后，鼠标悬停在“标题一”或“标题二”时，将自动显示对应内容，无需点击。

🧩 总结

通过简单的 JavaScript 和 CSS，你就可以让 Elementor Tab 实现“鼠标悬停切换内容”的交互效果，提升用户体验。特别是针对 Elementor 3.30.0 的类名变化，我们已适配并提供了完整解决方案，拿去即用。