Question

我正在构建一个并排需要6张图片的网站，当您将鼠标悬停在每张图片上时，您应该可以看到更大的图像。

目前我已设法编写以下代码，显示带有悬停功能的2张图片。我遇到的问题是图像出现在每个图像的顶部而不是并排。我试过添加一个浮动：左边然后第二个图像没有显示悬停图像，我不知道如何解决这个问题。

以下是HTML和CSS：

.Enlarge {
  position: relative;
}
.Enlarge span {
  position: absolute;
  left: -9999px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
.Enlarge span img {
  margin-bottom: 5px;
}
div.Enlarge:hover {
  z-index: 999;
  cursor: pointer;
}
div.Enlarge:hover span {
  visibility: visible;
  opacity: 1;
  top: 10px;
  left: 0px;
  z-index: 999;
  width: 240px;
  height: 340px;
  padding: 10px;
}

<div class="Enlarge">
  <img src="image1.jpg" alt="" /><span><img src="image1h.jpg" alt="" /></span>
</div>
<div class="Enlarge">
  <img src="image2.jpg" alt="" /><span><img src="image2h.jpg" alt="" /></span>
</div>

如果有人可以就如何解决这个问题提出建议，我将不胜感激，因为我需要显示6张图片，但目前尝试使用2张图片以确保其有效。

Answer 1

看看我的jsfiddle我刚刚使用了style =“float：left”

<div class="Enlarge" style="float: left">
  <img src="image1.jpg" alt="" /><span><img src="image1h.jpg" alt="" /></span>
</div>
<div class="Enlarge" style="float: left">
  <img src="image2.jpg" alt="" /><span><img src="image2h.jpg" alt="" /></span>
</div>

编辑：错过了链接https://jsfiddle.net/m4odfrcr/

Answer 2

修改你的课程如下

.Enlarge {
  position: relative;
  display:inline-block;
}

如何将2个div与位置相对并排

2 个答案: