Elementor Pro中CSS图片悬停换文本时hover范围过大问题求助

我用Elementor Pro结合CSS实现色卡交互效果：鼠标悬停产品的小色卡图片时，上方文本切换为对应颜色名称，离开悬停后恢复原文本。但目前遇到的问题是hover触发范围覆盖整个容器，而非仅小色卡区域。现有CSS代码如下：

.text:before {
    content: "Kies je kleur: Gun Metal";
    font-weight: bold;
}

.text:hover::before {
    content: "Kies je kleur: Rosé Gold";
}

解决步骤： #

• 调整结构关联：把色卡图片和文本容器放在同一个父容器内，给父容器添加类名（比如color-card-group），示例结构：

  <div class="color-card-group">
    <img src="你的色卡图片路径" class="color-swatch" alt="Rosé Gold">
    <div class="text"></div>
  </div>
  

• 修改hover触发逻辑：不要直接给文本容器绑定hover，改为通过父容器内的色卡hover来触发文本变化，确保只有悬停色卡时才切换文本：

  /* 默认显示的文本 */
  .text:before {
      content: "Kies je kleur: Gun Metal";
      font-weight: bold;
  }
  
  /* 仅悬停色卡所在的父容器时，切换文本 */
  .color-card-group:hover .text:before {
      content: "Kies je kleur: Rosé Gold";
  }
  

• 锁定色卡hover范围：给色卡图片添加CSS，确保hover只作用于图片实际区域：

  .color-swatch {
      display: inline-block; /* 限制hover范围为图片尺寸 */
      cursor: pointer; /* 给用户可交互的视觉提示 */
  }
  

• 多色卡场景扩展：如果有多个色卡，给每个色卡的父容器加独立类名，实现对应颜色的文本切换：

  <div class="color-card-group gunmetal-group">
    <img src="枪灰色色卡路径" class="color-swatch" alt="Gun Metal">
    <div class="text"></div>
  </div>
  <div class="color-card-group rosegold-group">
    <img src="玫瑰金色卡路径" class="color-swatch" alt="Rosé Gold">
    <div class="text"></div>
  </div>
  

  对应CSS：

  .text:before {
      content: "Kies je kleur: Gun Metal";
      font-weight: bold;
  }
  
  .gunmetal-group:hover .text:before {
      content: "Kies je kleur: Gun Metal";
  }
  
  .rosegold-group:hover .text:before {
      content: "Kies je kleur: Rosé Gold";
  }
  

内容的提问来源于stack exchange，提问作者Cas van Heer