悬停切换同位置文本导致div高度被撑开的解决方法

你提到的提前预置文本、通过透明度/颜色切换显示的方案完全可行，且能从根源解决布局跳动的问题。核心思路是提前让容器预留出最长文本所需的高度，切换内容时不会改变容器实际尺寸，也就不会撑开下方元素。

最简修改方案 #

如果不想调整现有代码结构，直接给文本容器加固定最小高度即可，原有JS逻辑不用做任何改动：

.stats-text {
  padding-top: 1rem;
  font-size: 2vw;
  text-align: left;
  color: #fff6f4;
  /* 数值根据最长文本实际渲染高度调整，保证所有文本放进去都不会溢出 */
  min-height: 8vw;
}

带过渡动画的优化方案 #

如果想要文本切换更自然，可以用预置文本+切换透明度的方案实现：

1. 调整HTML结构 #

提前把所有待显示文本放到容器内，添加专属标识类

<div class="col-7 stats-text" id="statsText">
  <p class="stats-text-item item-1">Our client’s monetary milestones are driven by our social tactics and digital marketing.</p>
  <p class="stats-text-item item-2">Our experience is from more than just a couple of wins - it’s from learning through years of wins and losses.</p>
  <p class="stats-text-item item-3">Our clients currently see a minimum average of 5.4 times return on ad spend.</p>
</div>

2. 调整CSS样式 #

.stats-text {
  padding-top: 1rem;
  font-size: 2vw;
  text-align: left;
  color: #fff6f4;
  position: relative;
}
/* 最长的文本设为静态定位+隐藏，用来撑出容器高度 */
.stats-text-item.item-2 {
  position: static;
  visibility: hidden;
  margin: 0;
}
.stats-text-item {
  position: absolute;
  top: 1rem;
  left: 0;
  margin: 0;
  opacity: 0;
  /* 加淡入淡出过渡效果 */
  transition: opacity 0.2s ease;
}
.stats-text-item.active {
  opacity: 1;
}

3. 调整JS逻辑 #

仅切换激活类，不需要修改DOM内容

$(".stats-text-1").hover(
  function() {
    $(".stats-text-item").removeClass("active");
    $(".item-1").addClass("active");
  },
  function() {
    $(".item-1").removeClass("active");
  }
);

$(".stats-text-2").hover(
  function() {
    $(".stats-text-item").removeClass("active");
    $(".item-2").addClass("active");
  },
  function() {
    $(".item-2").removeClass("active");
  }
);

$(".stats-text-3").hover(
  function() {
    $(".stats-text-item").removeClass("active");
    $(".item-3").addClass("active");
  },
  function() {
    $(".item-3").removeClass("active");
  }
);

内容的提问来源于stack exchange，提问作者Damian