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

Loading An Image Onto Another Using Hover (Javascript)

本文关键字：图像 加载 另一个 悬停 javascript      更新时间：2023-09-26

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

代码在这里：Pastebin.com

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

（向右滚动以查找一些图像）

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

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>

相关文章：