鼠标悬停图片时实现infoText平滑右移50px的过渡效果求助

嘿，我来帮你搞定这个平滑移动的需求！你之前用transition没成功，大概率是定位设置不对、过渡属性没选对或者选择器关联错误导致的，我给你整理了一个完整的可行方案：

完整代码示例 #

HTML（保留你原来的结构）

<div class="container-fluid">
  <div class="info-over">
    <div class="infoText">
      Text that need to move to the right
    </div>
    <img src="http://lorempixel.com/300/200" alt="Avatar" class="image">
  </div>
</div>

CSS（核心样式）

/* 容器设置相对定位，让内部元素可以基于它定位 */
.info-over {
  position: relative;
  display: inline-block; /* 让容器宽度自适应内容 */
}

/* 给infoText设置基础样式和过渡动画 */
.infoText {
  position: absolute;
  left: 0;
  top: 0;
  /* 指定transform属性的过渡效果，0.3秒时长，ease缓动让动画更自然 */
  transition: transform 0.3s ease;
  /* 可选：加个半透明背景让文字更清晰 */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 6px 10px;
}

/* 鼠标悬停图片时，触发infoText的移动 */
.image:hover ~ .infoText {
  transform: translateX(50px); /* 向右平移50px */
}

关键要点解释 #

1. 定位基础：给.info-over设置position: relative，这样.infoText的绝对定位会基于这个容器，移动时不会乱跑。
2. 过渡属性选择：用transform: translateX()来实现移动，比直接改left属性性能更好，而且过渡动画更流畅，记得把transition绑定到transform属性上。
3. 选择器关联：因为.infoText和.image是兄弟元素，所以要用兄弟选择器~来关联悬停事件——如果之前用了.image:hover .infoText，那肯定没用，因为.infoText不是图片的子元素。

如果你希望鼠标悬停整个容器（包括文字区域）都保持移动状态，可以把最后那个选择器改成：

.info-over:hover .infoText {
  transform: translateX(50px);
}

这样调整后，鼠标悬停图片时，文字就会平滑向右移动50px，离开时自动滑回原位啦！

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