Question

所以你可以通过标题来判断，我试图将图像加载到另一个上面/上面。我有这种非常业余的设置很难使用它。基本上我要做的就是将图像加载到与被徘徊的图像相同的位置。很难解释，但我想你可能会理解。

代码在这里：Pastebin.com

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

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

Answer 1

您可以将图像置于另一个图像的顶部，并在悬停时调整其不透明度值，从而获得所需的效果。一个简单的过渡将使它具有你想要的淡入/淡出外观。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

使用悬停将图像加载到另一个上（Javascript）

1 个答案: