悬停时的图像出现更多图像（画廊排序） Html css Javascript答案

【问题标题】：Image when Hovered appears some more images (sort of gallery) Html css Javascript悬停时的图像出现更多图像（画廊排序） Html css Javascript
【发布时间】：2018-10-31 00:04:26
【问题描述】：

我有这个问题，我设置了一个图像以在鼠标悬停时显示另一个图像，但是第一个图像仍然出现，新的图像不会改变高度和宽度并与另一个图像重叠。我对 HTML/CSS 还是很陌生，所以我可能错过了一些简单的东西。这里是示例代码：

<img src="LibraryTransparent.png" id="Library" />
<style>
#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}
</style>

【问题讨论】：

欢迎来到 SO，请添加您的代码以及到目前为止您尝试过的内容
所以它不是免费的代码服务。请展示你的努力并分享一些代码来解释你卡在哪里。

标签： javascript html css image hover

【解决方案1】：

不知道这是否太多，但这有效：

HTML：

<div class="container">
  <img src="https://placeimg.com/600/400/animals" alt="dog" />
  <img src="https://placeimg.com/600/400/people" alt="people" />
</div>

CSS：

.container {
  position: relative;
  width: 600px;
  height: 400px;
  margin-left: 50px;
}

.container:hover img:nth-of-type(2) {
  opacity: 1;
}
.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 300px;
  transition: opacity 1s ease-in-out 0s;
}
.container img:nth-of-type(1) {
  opacity: 1;
}
.container img:nth-of-type(2) {
  opacity: 0;
}

在这里现场观看：https://jsfiddle.net/billy_farroll/ajy5bm5f/

【讨论】：