Html 悬停Div元素

因此，我有一个容器div，其中包含5个其他div（见图），在悬停时，这些div沿箭头指向的方向滑动（图的右侧）。我通过CSS的：hover属性实现了这一点。然而，它实现了它的目的，但我只是不喜欢结果（见代码片段）；某些鼠标位置会导致div返回原始位置，然后再次返回悬停位置。有改进悬停特性的想法吗？图画

body，html{
填充：0；
保证金：0；
}
.车身容器{
位置：固定；
溢出：隐藏；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景尺寸：封面；
溢出：隐藏；
}
.ele集装箱{
宽度：50%；
溢出：隐藏；
身高：50%；
位置：绝对位置；
过渡：0.6s；
背景：蓝色；
边框：2倍白色固体；
}
#弹簧{
排名：0；
左：0；
}
#夏天{
排名：0；
左：50%；
}
#冬天{
最高：50%；
左：0；
}
#秋{
最高：50%；
左：50%；
}
#春天：之前，夏天：之前，冬天：之前，秋天：之前{
内容：''；
位置：绝对位置；
宽度：200px；
高度：200px；
背景：白色；
边界半径：50%；
}
#弹簧：悬停{
左-10%；
前-10%；
}
#冬季：悬停{
左-15%；
最高：65%；
}
#秋天：盘旋{
左：65%；
最高：65%；
}
#夏天：悬停{
左：65%；
前-15%；
}
#春天：以前{
底部：-100px；
右：-100px；
}
#夏天：以前{
底部：-100px；
左：-100px；
}
#冬天：以前{
顶部：-100px；
右：-100px；
}
#秋天：以前{
顶部：-100px；
左：-100px；
}
#关于圆圈{
位置：绝对位置；
边界半径：100%；
转换：翻译（-50%，-50%）；
显示器：flex；
左：50%；
最高：50%；
宽度：200px；
高度：200px；
背景：线性梯度（rgb（244271193），rgb（204230255））；
边框：实心4pxRGBA（255、255、255、.5）；
}

春天
夏天
冬天
秋

创建伪元素并移动它们，而不是移动主

div

当这样做时，它将解决悬停问题

请注意，您可能需要稍微调整一下移动，我只是制作它们来演示如何操作

body，
html{
填充：0；
保证金：0；
}
.车身容器{
位置：固定；
溢出：隐藏；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景尺寸：封面；
溢出：隐藏；
}
.ele集装箱{
宽度：50%；
溢出：隐藏；
身高：50%；
位置：绝对位置；
}
#弹簧{
排名：0；
左：0；
}
#夏天{
排名：0；
左：50%；
}
#冬天{
最高：50%；
左：0；
}
#秋{
最高：50%；
左：50%；
}
#春天：以前，
#夏天：以前，
#冬天：以前，
#秋天：以前{
内容：''；
位置：绝对位置；
宽度：200px；
高度：200px；
背景：白色；
过渡：0.6s；
边界半径：50%；
变换原点：左上；
}
#春天：以前{
左：计算（100%-100px）；
顶部：计算（100%-100px）；
}
#夏天：以前{
顶部：计算（100%-100px）；
左：-100px；
}
#冬天：以前{
顶部：-100px；
左：计算（100%-100px）；
}
#秋天：以前{
顶部：-100px；
左：-100px；
}
#春天：之后，
#夏天：之后，
#冬天：之后，
#秋天：之后{
内容：''；
左：0；
排名：0；
宽度：100%；
身高：100%；
位置：绝对位置；
过渡：0.6s；
背景：蓝色；
边框：2倍白色固体；
变换原点：左上；
z指数：-1；
}
#关于圆圈{
位置：绝对位置；
边界半径：100%；
转换：翻译（-50%，-50%）；
显示器：flex；
左：50%；
最高：50%；
宽度：200px；
高度：200px；
背景：线性梯度（rgb（244271193），rgb（204230255））；
边框：实心4pxRGBA（255、255、255、.5）；
}
#spring:hover：：之前，
#spring:hover:：after{
转换：翻译（-30%，-15%）；
}
#冬季：悬停：：之前，
#冬季：悬停：：之后{
转换：翻译（-15%，30%）；
}
#秋天：悬停：：以前，
#秋天：盘旋：：之后{
转换：翻译（30%，15%）；
}
#夏天：悬停：：以前，
#夏天：悬停：：之后{
转换：翻译（30%，-15%）；
}

春天
夏天
冬天
秋

创建伪元素并移动它们，而不是移动主

div

当这样做时，它将解决悬停问题

请注意，您可能需要稍微调整一下移动，我只是制作它们来演示如何操作

body，
html{
填充：0；
保证金：0；
}
.车身容器{
位置：固定；
溢出：隐藏；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景尺寸：封面；
溢出：隐藏；
}
.ele集装箱{
宽度：50%；
溢出：隐藏；
身高：50%；
位置：绝对位置；
}
#弹簧{
排名：0；
左：0；
}
#夏天{
排名：0；
左：50%；
}
#冬天{
最高：50%；
左：0；
}
#秋{
最高：50%；
左：50%；
}
#春天：以前，
#夏天：以前，
#冬天：以前，
#秋天：以前{
内容：''；
位置：绝对位置；
宽度：200px；
高度：200px；
背景：白色；
过渡：0.6s；
边界半径：50%；
变换原点：左上；
}
#春天：以前{
左：计算（100%-100px）；
顶部：计算（100%-100px）；
}
#夏天：以前{
顶部：计算（100%-100px）；
左：-100px；
}
#冬天：以前{
顶部：-100px；
左：计算（100%-100px）；
}
#秋天：以前{
顶部：-100px；
左：-100px；
}
#春天：之后，
#夏天：之后，
#冬天：之后，
#秋天：之后{
内容：''；
左：0；
排名：0；
宽度：100%；
身高：100%；
位置：绝对位置；
过渡：0.6s；
背景：蓝色；
边框：2倍白色固体；
变换原点：左上；
z指数：-1；
}
#关于圆圈{
位置：绝对位置；
边界半径：100%；
转换：翻译（-50%，-50%）；
显示器：flex；
左：50%；
最高：50%；
宽度：200px；
高度：200px；
背景：线性梯度（rgb（244271193），rgb（204230255））；
边框：实心4pxRGBA（255、255、255、.5）；
}
#spring:hover：：之前，
#spring:hover:：after{
转换：翻译（-30%，-15%）；
}
#冬季：悬停：：之前，
#冬季：悬停：：之后{
转换：翻译（-15%，30%）；
}
#秋天：悬停：：以前，
#秋天：盘旋：：之后{
转换：翻译（30%，15%）；
}
#夏天：悬停：：以前，
#夏天：悬停：：之后{
转换：trans