应用:hover伪类时元素使用top/TranslateY出现闪烁问题

你遇到的闪烁问题原因完全正确——元素上移后脱离了鼠标的hover触发范围，导致hover状态反复切换，形成循环。下面是几个实用的解决方案：

方案1：用父容器承接hover事件（推荐） #

把每个.info-tab放在固定位置的父容器里，给父容器绑定hover事件来控制子元素的移动。父容器位置不变，只要鼠标在父容器范围内，hover状态就不会失效。

修改React结构： #

<div className="content-container">
  <div className="about-us">
    <h1>Why Fitness Tracker?</h1>
    {/* 给每个info-tab添加父容器 */}
    <div className="info-tab-wrapper">
      <div className="info-tab1 info-tab">
        <img key="3" src={orange} alt="Fruit-3" className="fruit-3" />
        <p>Personalize</p>
      </div>
    </div>
    <div className="info-tab-wrapper">
      <div className="info-tab2 info-tab">
        <p>Achieve</p>
      </div>
    </div>
    <div className="info-tab-wrapper">
      <div className="info-tab3 info-tab">
        <img key="4" src={banana} alt="Fruit-4" className="fruit-4" />
        <p>Track</p>
      </div>
    </div>
  </div>
  <div className="user-reviews">
    <div className="bottom-left-circle">
      <img key="1" src={strawberry} alt="Fruit-1" className="fruit-1" />
      <img key="2" src={apple} alt="Fruit-2" className="fruit-2" />
    </div>
  </div>
</div>

调整CSS： #

/* 设置父容器尺寸和原info-tab一致，确保覆盖交互范围 */
.info-tab-wrapper {
  height: auto; /* 或者设置和.info-tab相同的固定高度 */
  margin: 0;
  padding: 0;
}
/* 父容器hover时控制子元素移动 */
.info-tab-wrapper:hover .info-tab {
  transform: translate(0, -50px);
}
/* 保留原动画样式 */
.info-tab {
  animation: BubbleUp 1s ease-in-out forwards;
}

方案2：扩展元素的可hover区域 #

给.info-tab添加底部内边距，扩展元素的交互范围，即使元素上移，鼠标仍能落在扩展的区域内。

修改CSS： #

.info-tab {
  animation: BubbleUp 1s ease-in-out forwards;
  padding-bottom: 50px; /* 等于上移的距离 */
  box-sizing: border-box; /* 确保内边距不增加元素总宽度 */
}
.info-tab:hover {
  transform: translate(0, -50px);
}

方案3：用伪元素创建hover承接层 #

通过伪元素在元素下方生成一个透明的区域，覆盖元素上移后的范围，确保鼠标始终能触发hover状态。

修改CSS： #

.info-tab {
  animation: BubbleUp 1s ease-in-out forwards;
  position: relative; /* 让伪元素相对于当前元素定位 */
}
.info-tab::after {
  content: '';
  position: absolute;
  bottom: -50px; /* 和上移距离一致 */
  left: 0;
  width: 100%;
  height: 50px; /* 覆盖上移后的空白区域 */
}
.info-tab:hover {
  transform: translate(0, -50px);
}

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