javascript - 使用悬停将图像加载到另一个图像上 (Javascript)

Question

正如您从标题中可以看出的那样，我正在尝试将图像加载到另一个图像之上/之上。对于我这个非常业余的设置来说，使用起来有点困难。基本上我想做的是将图像加载到与悬停图像相同的位置。很难解释，但我想你可能会理解。

代码在这里:Pastebin.com

它目前所做的是使用图像创建某种 map 。一旦悬停在上面，它们就会变暗并显示图像的真实姓名。它还没有做的是在当前悬停的图像上方加载新图像(如果有意义的话)。希望有人可以提供帮助。您可以在此处查看其当前状态:Sinnoh.php

(向右滚动以查找一些图像)

Answer 1

您可以通过将图像放在另一个图像之上并在悬停时调整其不透明度值来获得所需的效果。一个简单的过渡将给它你想要的淡入/淡出外观。

img {
  height: 600px;
  width: 200px;
}
.alt-img {
  opacity: 0;
}
.image-container:hover > .main-img {
  opacity: 0;
}
.image-container:hover > .alt-img {
  opacity: 1;
}
img {
  transition: 1s;
  position: absolute;
}

<div class="image-container">
  <img class="main-img" src="http://gogojjtech.com/misc/map/route204.png" />
  <img class="alt-img" src="http://gogojjtech.com/misc/map/route205.png" />
</div>