Html 图像出现在悬停在上方的其他图像上

我试图创建一个图像地图，其中有一个主图像，当你在某些区域悬停时，会出现不同的图像

类似这样的东西，但不是创建一个轮廓，而是显示不同的图像

我不想使用jQuery，而是更愿意依赖CSS和HTML

---

提前感谢。

您可以在大型主图像上覆盖较小的空白图像，并对每个图像分别使用悬停代码

非悬停图像是一个“空白”png，悬停是所需的结果

---

只需为每个“空白”图像使用代码，主图像位于背景中，z索引为“0”

正如前面的答案所述，您可以通过使用z-index属性来实现这一点。但请尝试将主图像的z索引设置为0，并将所有小图像（要在主图像上显示）设置为低于0

最后，在鼠标悬停时，通过在低于或高于0的值之间交换z索引来激活

---

希望这有帮助：）

我所说的“空白”是指完全透明，听起来不错……作为一名编码新手，我在css中迷失了方向……特别是这一点@enhzflep有什么建议吗？