Css 光标移动时悬停转换行为不正常

我正在尝试使用悬停变换移动元素。我所期望的是，当鼠标悬停在元素上时，将触发转换。当鼠标离开该元素时，它将返回。但是现在发生的事情是，它的行为与鼠标悬停不同。这意味着，即使在元素中，如果我移动光标，转换也会触发。我的代码是：

.wrapper{
高度：150像素；
溢出：隐藏；
显示器：flex；
宽度：150px；
柔性包装：包装；
}
.img{
宽度：100%；
高度：150像素；
背景色：番茄；
颜色：黑色；
}
.info{
高度：150像素；
宽度：100%；
背景色：天蓝色；
变换：translateY（0）；
过渡：所有1；
}
.img:hover~.info{
转换：translateY（-150px）；
}

我是IMG
这是信息

为什么会这样

因为当您将

.info

放置在

.img

上方时，您不再将其悬停在

.img

上

在

.info

上使用

指针事件：none

，或者如果不可能（因为用户也需要与该元素交互），则通过：悬停在父容器上-

。包装器：hover.info{…}

对.img和.info都使用鼠标悬停，这样当其中一个出现时，您就可以保持您想要的状态。你什么时候走？信息会回来的

.wrapper{
高度：150像素；
溢出：隐藏；
显示器：flex；
宽度：150px；
柔性包装：包装；
}
.img{
宽度：100%；
高度：150像素；
背景色：番茄；
颜色：黑色；
}
.info{
高度：150像素；
宽度：100%；
背景色：天蓝色；
变换：translateY（0）；
过渡：所有1；
}
.img:hover~.info、.info:hover{
转换：translateY（-150px）；
}

我是IMG
这是信息