图片在同一位置没有更改

抱歉，我可能有些误解您的要求。如果您想要切换不同的图片，您需要在HTML中添加一些内容来指定鼠标悬停在哪个点上时显示哪个图片。例如，您可以添加一个包含点的列表，并为每个点指定一个唯一的类名，如下所示：

<ul class="Pictureul2">
  <li class="point1">&bull;</li>
  <li class="point2">&bull;</li>
  <li class="point3">&bull;</li>
  <li class="point4">&bull;</li>
</ul>

然后，您需要将每个图片与其对应的点相关联，例如：

.pi1 {
  top: 0px;
  width: 430px;
  height: 320px;
  position: absolute;
  background: url("../images/p1.jpg");
  opacity: 1;
}

.pi2 {
  top: 0px;
  width: 430px;
  height: 320px;
  position: absolute;
  background: url("../images/p2.jpg");
  opacity: 0;
}

.pi3 {
  top: 0px;
  width: 430px;
  height: 320px;
  position: absolute;
  background: url("../images/p3.jpg");
  opacity: 0;
}

.pi4 {
  top: 0px;
  width: 430px;
  height: 320px;
  position: absolute;
  background: url("../images/p4.jpg");
  opacity: 0;
}

.Pictureul2 > .point1:hover ~ .pi1 {
  opacity: 1;
}

.Pictureul2 > .point2:hover ~ .pi2 {
  opacity: 1;
}

.Pictureul2 > .point3:hover ~ .pi3 {
  opacity: 1;
}

.Pictureul2 > .point4:hover ~ .pi4 {
  opacity: 1;
}

这将根据鼠标悬停在哪个点上来显示不同的图片。请注意，您需要将每个图片的位置调整为不重叠，以便正确显示。