CSS元素悬停重叠问题：悬停状态异常修复方案咨询

问题描述 #

我想使用一款按钮组件，HTML结构如下：

<div class="phone cta">Call us</div>
<div class="phone number">(453) 416-4742</div>

当前存在动画异常：

• 悬停.cta后，它从初始位置（OP）移动到新位置（NP），此时动画正常不会中断；
• 但当.cta处于NP位置时，光标悬停回OP区域（即.number所在区域），.cta的动画会中断并返回OP位置。

我尝试过两种思路：在.number上设置悬停过渡但因z-index问题无法触发；获取.number位置并添加事件监听器，想知道最优解决方案是什么。

最优解决方案：使用父容器统一控制hover状态 #

核心思路是将两个按钮元素包裹在同一个父容器中，通过父容器的hover状态来控制.cta的动画，这样只要鼠标停留在父容器范围内（无论在.cta还是.number上），.cta都会保持在目标位置，避免因单个元素的hover状态丢失导致动画中断。

步骤1：调整HTML结构 #

新增一个父容器包裹两个按钮元素：

<div class="phone-wrapper">
  <div class="phone cta">Call us</div>
  <div class="phone number">(453) 416-4742</div>
</div>

步骤2：修改CSS逻辑 #

将原来绑定在.cta:hover的动画规则，改为绑定在父容器的hover状态下：

/* 确保父容器足够大，覆盖两个按钮的初始位置和.cta移动后的位置 */
.phone-wrapper {
  position: relative;
  /* 根据实际按钮尺寸设置合适的宽高，示例值 */
  width: 220px;
  height: 50px;
}

/* 初始状态下的.cta样式保持不变 */
.phone.cta {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease;
  /* 其他原有样式 */
}

/* 通过父容器hover控制.cta的移动 */
.phone-wrapper:hover .phone.cta {
  transform: translateX(120px); /* 对应原来hover时的移动距离 */
}

/* .number的样式保持不变，可调整position确保在父容器内 */
.phone.number {
  position: absolute;
  top: 0;
  left: 0;
  /* 其他原有样式 */
}

方案优势 #

• 无需处理复杂的z-index或JavaScript事件监听，纯CSS实现，性能更好；
• 父容器的hover状态会覆盖所有子元素的范围，彻底解决鼠标移到.number区域导致动画中断的问题；
• 代码结构更清晰，维护成本低。

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