有没有办法让一个div推送/移动另一个div，当它在悬停时展开/移动/显示时只使用HTML & CSS？

是的，可以使用HTML和CSS来实现让一个div推送/移动另一个div，并在悬停时展开/移动/显示。以下是一种常见的实现方式：

HTML代码：

<div class="container">
  <div class="trigger"></div>
  <div class="target"></div>
</div>

CSS代码：

.container {
  position: relative;
}

.trigger {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.target {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 100%;
  transition: left 0.5s;
}

.trigger:hover + .target {
  left: 100px;
}

解释：

• 首先，我们创建一个包含两个div的容器，一个是触发器（trigger），另一个是目标（target）。
• 触发器的样式可以根据需求进行自定义，这里设置为蓝色的正方形。
• 目标的样式也可以根据需求进行自定义，这里设置为红色的正方形，并使用绝对定位（position: absolute）将其放在触发器的右侧。
• 通过设置目标的初始left属性为触发器的宽度（100%），使其隐藏在触发器的右侧。
• 使用CSS的过渡效果（transition）来实现平滑的动画效果。
• 当鼠标悬停在触发器上时，通过使用相邻选择器（+）选择目标元素，并将其left属性设置为触发器的宽度（100px），从而展开/移动/显示目标元素。

这种方法只使用了HTML和CSS，没有使用JavaScript或其他编程语言。它适用于简单的动画效果和交互，但对于更复杂的动态行为，可能需要使用JavaScript来实现。