如何解决鼠标悬停文本与图片间时div抖动的问题？

问题核心是当前hover逻辑会触发循环切换hover状态：当鼠标移到文本与图片之间的区域时，.mainpara:hover~.mainimg会让图片上移，此时鼠标位置不再覆盖图片，图片恢复原位后又重新触发hover，最终造成持续抖动。

修复方案 #

将hover触发逻辑绑定到父容器.maincontent上，只要鼠标在容器内任意位置，图片都会保持变化状态，彻底避免循环触发。

修改后的CSS代码：

.maincontent img {
  opacity: 0.8;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  background-size: cover;
}

/* 父容器hover时统一控制图片状态 */
.maincontent:hover .mainimg {
  margin-top: -200px;
  opacity: 0.4;
  transition: all 0.2s ease-in-out;
}

.maincontent {
  overflow: hidden;
  position: relative;
  margin: 15px;
  background-color: #ff78c54e;
  width: 450px;
  border-radius: 20px;
  padding: 5px;
  border-color: #e8a9a9b4;
  height: 450px;
  transition: all 0.1s ease-in-out;
}

HTML代码保持不变：

<div class="maincontent">
  <img class="mainimg" src="https://c4.wallpaperflare.com/wallpaper/234/543/684/food-pizza-wallpaper-preview.jpg" alt="">
  <p class="mainpara">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis praesentium laborum ducimus, debitis quod tenetur quam enim quaerat, sed labore fugit neque veritatis molestiae quasi nihil asperiores, nobis quae tempora. Consequuntur neque dignissimos assumenda Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus consequatur quis, accusantium aut sunt optio esse hic nam. Perferendis molestias deserunt nisi quibusdam minus cum sint. Blanditiis officiis ullam architecto mollitia animi vero tempore ipsa iure culpa reiciendis quisquam ratione maxime, consectetur quod, natus pariatur eveniet, accusantium rerum? Dignissimos, voluptas!</p>
</div>

原理说明 #

• 把hover事件绑定到父容器后，只要鼠标处于.maincontent内部（包括文本、图片、中间空白区域），就会持续触发图片的样式变化，不会因为图片位置移动导致hover状态反复切换。
• 保留了原有的过渡动画效果，交互体验一致且彻底解决抖动问题。

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