Question

我试图将4张图片放在HTML格式的行中并使用CSS代码在鼠标悬停在它上面时缩放它们 HTML代码：

<img class="Images" src="Images/image1.jpg" style="position:absolute; top:590px; left: 420px;">
<img class="Images" src="Images/image2.jpg" style="position:absolute; top:590px; left: 590px;">
<img class="Images" src="Images/image3.jpg" style="position:absolute; top:590px; left: 760px;">
<img class="Images" src="Images/image4.jpg" style="position:absolute; top:590px; left: 930px;">

CSS代码：

.Images{
    width: 150px;
    height: 150px;
    border: 1px solid blue;
}
.Images:hover{
    -moz-transform:scale(4);
    -o-transform:scale(4);
    -webkit-transform:scale(4);
}

我的问题是，当我缩放第一张图像时，它会在图像内部显示下一张图像，当我缩放第二张图像时，它会在图像内部显示下一张图像，但第一张图像隐藏在图像内部。第二张图片等。我怎么想隐藏下一张图片。

Answer 1

所以听起来你希望图像悬停在其他人面前。要执行此操作，请使用z-index CSS属性指定堆栈顺序：http://www.w3schools.com/cssref/pr_pos_z-index.asp

.Images{
    width: 150px;
    height: 150px;
    border: 1px solid blue;
    z-index:0;
}
.Images:hover{
    -moz-transform:scale(4);
    -o-transform:scale(4);
    -webkit-transform:scale(4);
    z-index:1;
}

Answer 2

在悬停时使用z-index

＆＃13;

.Images{
    width: 150px;
    height: 150px;
    border: 1px solid blue;
}
.Images:hover{
    -moz-transform:scale(4);
    -o-transform:scale(4);
    -webkit-transform:scale(4);
    z-index:100;
}

＆＃13;

<img class="Images" src="http://placekitten.com/200/300" style="position:absolute; top:590px; left: 420px;">
<img class="Images" src="http://placekitten.com/200/300" style="position:absolute; top:590px; left: 590px;">
<img class="Images" src="http://placekitten.com/200/300" style="position:absolute; top:590px; left: 760px;">
<img class="Images" src="http://placekitten.com/200/300" style="position:absolute; top:590px; left: 930px;">

＆＃13;

缩放时图像重叠

2 个答案: