javascript - HTML/CSS 图像缩放

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

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

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

这是它的代码笔 https://codepen.io/anon/pen/GMrZwj