Question

我正在开发自己的网站以获得乐趣，我遇到了问题。我有一个主页，我有3张图片，最初是透明的。当我将鼠标放在其中一个上时，所选择的一个将自动缩放并变为完全可见（1.0不透明度和比例1.10）。在变焦时，所选择的图像被下一个覆盖了一点（我认为这是因为它们在代码中的位置......）。所以：我不想调整它们的大小，因为它们的大小合适;我只是想知道是否有可能缩小（收缩？对不起，我不知道正确的词）未选择的图像，而选择的图像是缩放的（我使用事件“悬停”来缩放图像）。是否有可能“连接”许多事件？谢谢，晚上好。这是代码。

 img {

            opacity: 0.5;

        }

        img:hover {

            -webkit-transform:scale(1.10);
            opacity: 1.0;

        }

        <div id="slider" class="nivoSlider">
            <center>

             <a href="link" style="color:black; hover:black;"><img src="im1.jpg" alt="" border="5"/></a>
             <a href="link" style="color:black; hover:black;" target="_blank"><img src="img2.jpg" alt="" border="5" style="background-color:white;"/></a>
             <a href="link" style="color:black; hover:black;"><img src="img3.jpg" alt="" border="5" height="168px"/></a>

            </center>

        </div>

Answer 1

您可以通过更改活动图像的z-index，在没有javascript的情况下执行此操作。基本上将悬停的图像移到前面：

.img{
    position: relative;
    z-index: 1;
}
.img:hover{
    z-index: 2;
}

以下是https://codepen.io/anon/pen/GMrZwj

的代码

HTML / CSS图像放大

1 个答案: