悬停文本上的CSS将消失，而不是像图像一样滑出

有人能解释一下为什么当你悬停时，图像会很好地向后滑动，而文本会立即消失吗

.wrapper{
位置：相对位置；
溢出：隐藏；
宽度：100px；
高度：100px；
边框：1px纯黑；
}
#形象{
位置：绝对位置；
左：0；
宽度：100px；
高度：100px；
背景：蓝色；
过渡：1s；
}
.wrapper:悬停#图像{
过渡：1s；
左：-100px；
}
.wrapper:hover.text{
过渡：1s；
左：50%；
}
.文本{
空白：nowrap；
//颜色：黑色；
字体大小：20px；
位置：绝对位置；
溢出：隐藏；
最高：50%；
左：150%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

文本

您还需要将

转换

属性添加到

.text

：

.wrapper{
位置：相对位置；
溢出：隐藏；
宽度：100px；
高度：100px；
边框：1px纯黑；
}
#形象{
位置：绝对位置；
左：0；
宽度：100px；
高度：100px；
背景：蓝色；
过渡：1s；
}
.wrapper:悬停#图像{
过渡：1s；
左：-100px；
}
.wrapper:hover.text{
过渡：1s；
左：50%；
}
.文本{
空白：nowrap；
//颜色：黑色；
字体大小：20px；
位置：绝对位置；
溢出：隐藏；
最高：50%；
左：150%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
过渡：1s；
}

文本

您还需要将

转换

属性添加到

.text

：

.wrapper{
位置：相对位置；
溢出：隐藏；
宽度：100px；
高度：100px；
边框：1px纯黑；
}
#形象{
位置：绝对位置；
左：0；
宽度：100px；
高度：100px；
背景：蓝色；
过渡：1s；
}
.wrapper:悬停#图像{
过渡：1s；
左：-100px；
}
.wrapper:hover.text{
过渡：1s；
左：50%；
}
.文本{
空白：nowrap；
//颜色：黑色；
字体大小：20px；
位置：绝对位置；
溢出：隐藏；
最高：50%；
左：150%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
过渡：1s；
}

文本