Javascript 如何在内容悬停后将其放入框中？

我计划制作一个类似于便笺的样式，我希望在悬停未激活时，在不首先显示内容的情况下显示框内的内容。就像这里我的代码示例：请帮助

正文{
利润率：45像素；
}
.盒子{
显示：内联块；
背景颜色：粉红色；
高度：200px；
宽度：200px；
转换：转换300毫秒的输入输出；
指针事件：无；
}
.集装箱{
宽度：200px；
高度：200px；
边框：20px纯灰；
背景色：紫罗兰色；
}
.container:hover.box{
变换：平移（200px，150px）旋转（20度）；
}

CSS转换
你好

您必须设置内部div的

位置：绝对

，即

.box

将其放置在文本上方。记住设置父div的

位置：相对
，即
.container

绝对定位元素从正常文档流中删除；页面布局中没有为元素创建空间。相反，它是定位的
相对于其最近的祖先（如有）；否则就是
相对于初始包含块放置。它的最终位置是
由“顶部”、“右侧”、“底部”和“左侧”的值确定。此值
当z索引的值不是自动时，创建新的堆叠上下文。
绝对定位的框可以有边距，并且不会折叠
与任何其他利润



正文{
利润率：45像素；
}
.盒子{
显示：内联块；
背景颜色：粉红色；
高度：200px；
宽度：200px；
转换：转换300毫秒的输入输出；
指针事件：无；
位置：绝对位置；
排名：0；
左：0；
}
.集装箱{
位置：相对位置；
宽度：200px；
高度：200px；
边框：20px纯灰；
背景色：紫罗兰色；
}
.container:hover.box{
变换：平移（200px，150px）旋转（20度）；
}

CSS转换
你好

不清楚您想要实现什么目标。你能不能编辑一下这个问题，让它包含一个更清晰的解释？因此，这里似乎没有进行任何研究。您是否已经尝试过任何方法来实现预期的行为？所以您只想扭转当前的行为？i、 e.让粉红色的
.box
元素在悬停状态下滑入而不是滑出？嘿，伙计们，很抱歉我没有解释。我编辑了上面的描述，让你们更清楚地了解我想要实现的目标。谢谢您的反馈！：）非常感谢！谢谢你！这正是我想要实现的！很乐意帮忙：）