Question

最初，在我的CSS中，我将4张图像放在一起。 2在顶部，彼此相邻浮动，2在底部。

.img1 {
    float: left;
}

.img2 {
    float: left;
}

.clear1 {
    clear: both;
}

.img3 {float: left;}
.img4 {float: left;}
.clear {clear: both;}

这是我对4个图像彼此相邻的代码的基本思想，2在顶部，2在底部。我想要第一张图片，当我将鼠标悬停在它上面时，覆盖页面上的其他3张图像。我知道要使图像悬停，我必须执行.img1:hover {后跟多个属性。

我不知道如何使图像覆盖其他3个图像，因为它会放大，而不会移动其他3个图像。如果有人知道如何做到这一点，请帮助。当我让img1变大时，它会将其他3张图像向下推，而我不希望这样。

其他研究表明，使用z-index属性可能会有所帮助，但我不知道如何使用它。

<div class="img1" >
</div>


<div class="img2" >
</div>


 <div class="img3" >
</div>


 <div class="img4" >
</div>

Answer 1

为了使用z-index值，首先需要设置static之外的position属性。如果选择相对，则图像将按预期移动。然后，您可以将您想要的图像的z-index设置为更高的数字（默认值为0）。

.img1, .img2, .img3, .img4 {
float:left; position: relative; }
.img1: hover {
z-index:10; }

Answer 2

演示：https://jsfiddle.net/IA7medd/qncrsq8d/

.images{
  position:relative;
  overflow:hidden;
}
.img1, .img3 {
    float: left;
    max-width:49%;
}

.img2, .img4 {
    float: right;
    max-width:49%;
}

.images img{
  max-width:100%;
}

.images img:hover{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  max-width:100%;
  z-inedx:9;
}

如何在不移动其他图片的情况下将图片悬停在其他图片上？

2 个答案: