如何实现悬停后显示盒子内容？便签样式开发求助

我明白你的需求了——未悬停时只有粉色的.box可见，紫色容器里的段落要藏起来；当鼠标悬停时，粉色盒子移动旋转，同时紫色容器的背景和段落显现出来。咱们来调整一下CSS就能实现这个效果：

修改后的CSS代码 #

body { margin: 45px; }

/* 容器默认背景透明，设置相对定位让内部元素可定位 */
.container {
  width: 200px;
  height: 200px;
  border: 20px solid grey;
  background-color: transparent;
  transition: background-color 300ms ease-in-out;
  position: relative;
}

/* 默认隐藏段落，添加过渡动画 */
.container p {
  margin: 0;
  padding: 20px;
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

/* 粉色盒子默认覆盖在容器上方 */
.box {
  display: inline-block;
  background-color: pink;
  height: 200px;
  width: 200px;
  transition: transform 300ms ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

/* 悬停时触发的状态变化 */
.container:hover {
  background-color: violet; /* 显示紫色背景 */
}

.container:hover p {
  opacity: 1; /* 显示段落文本 */
}

.container:hover .box {
  transform: translate(200px, 150px) rotate(20deg); /* 粉色盒子移动旋转 */
}

改动说明 #

• 给.container加上position: relative，让内部的.box可以用绝对定位刚好覆盖在容器上，这样未悬停时粉色盒子会挡住容器的背景和段落。
• 容器默认背景设为透明，悬停时切换为violet，实现背景“显现”的效果，同时给背景色加上过渡动画，让变化更平滑。
• 段落默认设置opacity: 0（完全透明），悬停时改为opacity: 1，配合过渡动画实现文本的平滑显示。
• 移除了.box的pointer-events: none，这样鼠标放在粉色盒子上时也能触发容器的hover事件，符合交互逻辑。
• 所有动画都统一使用300ms的ease-in-out曲线，保证整体动效的一致性。

HTML部分不需要修改，保持你原来的结构就可以啦。

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