WordPress Elementor实现悬停同CSS类元素放大高亮效果

核心实现思路 #

不要通过JavaScript直接修改元素宽高实现放大，这种方式会触发页面重排，不仅动效卡顿，还会打乱定价表原有排版。最优方案是把动效样式全部写在CSS里，JS只负责做同组元素的类名切换，性能更好、维护也更简单。

第一步：添加基础动效CSS #

把以下代码粘贴到Elementor站点的「外观→自定义→额外CSS」，或者定价表所在页面的自定义CSS区域：

/* 所有需要参与联动的定价表元素统一加这个公共类 */
.pricing-link-cell {
  /* 给所有属性加0.3秒平滑过渡，动效不生硬 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 缩放以元素中心为原点，不会出现位置偏移 */
  transform-origin: center center;
  cursor: pointer;
}

/* 联动激活状态：高亮+Zoom In放大 */
.pricing-link-cell.is-hovered {
  /* 替换成你需要的高亮背景色 */
  background-color: #eef4ff;
  /* 放大比例，1.05即放大5%，建议取值1.03-1.08效果最自然 */
  transform: scale(1.05);
  /* 可选：加浅阴影强化悬浮感 */
  box-shadow: 0 3px 10px rgba(20, 70, 150, 0.1);
  /* 防止放大的元素被相邻单元格遮挡 */
  position: relative;
  z-index: 9;
}

注意：你之前为每个套餐（比如BASIC、PRO）同列/同行元素设置的专属CSS类（比如plan-basic、plan-pro）要保留，用来做同组元素匹配；所有需要参与联动的元素，都额外加上上面的公共类pricing-link-cell。

第二步：添加联动JavaScript #

把以下代码粘贴到定价表所在页面的「自定义HTML」组件中，将组件放在页面最底部即可：

document.addEventListener('DOMContentLoaded', () => {
  // 获取所有参与联动的定价单元格
  const allPricingCells = document.querySelectorAll('.pricing-link-cell');

  allPricingCells.forEach(cell => {
    // 鼠标悬停：匹配同组元素加激活类
    cell.addEventListener('mouseenter', function() {
      // 筛选当前元素所属的套餐专属类，以下规则匹配所有plan-开头的类，可根据你实际的类名规则调整
      const targetPlanClass = Array.from(this.classList).find(className => className.startsWith('plan-'));
      if (!targetPlanClass) return;
      // 给所有同套餐的元素加上激活状态类
      document.querySelectorAll(`.${targetPlanClass}`).forEach(planCell => {
        planCell.classList.add('is-hovered');
      });
    });

    // 鼠标移出：移除所有同组元素的激活类
    cell.addEventListener('mouseleave', function() {
      const targetPlanClass = Array.from(this.classList).find(className => className.startsWith('plan-'));
      if (!targetPlanClass) return;
      document.querySelectorAll(`.${targetPlanClass}`).forEach(planCell => {
        planCell.classList.remove('is-hovered');
      });
    });
  });
});

调整说明 #

• 如果你设置的套餐专属类不是plan-开头，比如是tier-basic、member-basic，只需要修改JS里startsWith('plan-')的匹配规则，改成对应前缀即可
• 你之前写的直接在JS里修改元素背景色的代码可以全部删除，所有样式调整都在CSS的.pricing-link-cell.is-hovered里修改即可，不需要动JS逻辑
• 如果需要让定价表的标题栏、底部购买按钮也参与联动，只需要给这些元素加上对应的套餐专属类+公共类pricing-link-cell，不需要额外修改代码
• 代码部署后如果看不到效果，清空站点缓存、浏览器缓存后再刷新测试即可

内容的提问来源于stack exchange，提问作者Houssam AL Halabi