使用 Hover (Javascript) 将图像加载到另一个图像上答案

【问题标题】：Loading An Image Onto Another Using Hover (Javascript)使用 Hover (Javascript) 将图像加载到另一个图像上
【发布时间】：2015-04-01 17:55:31
【问题描述】：

从标题可以看出，我正在尝试将图像加载到另一个图像上方/上。我的这种非常业余的设置很难使用。基本上我想要做的是将图像加载到与悬停的图像相同的位置。很难解释，但我想你可能会明白。

代码在这里：Pastebin.com

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

（向右滚动找到一些图片）

【问题讨论】：

欢迎。您应该在问题中包含代码。链接可能会中断。
我真的不明白你想要做什么以及你的问题到底是什么。也不是代码的粘贴箱，小提琴会更好。
您是否有特定的理由为此使用 Javascript？最好使用 CSS。
好吧，这是业余时间，所以我正在使用任何有效的方法。如果你有一个有效的 CSS 方法，我很乐意使用它。 @Ozan - 你看到悬停时图像如何褪色？我希望它们淡入另一个图像。就像它被命名为“route202.png”一样，当你将鼠标悬停在它上面时，它会应用现有的淡入淡出但淡入一个名为“route202events.png”的图像我希望能澄清一点。

标签： javascript jquery html image hover

【解决方案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>

【讨论】：