我开发自己的网站只是为了好玩,但遇到了问题。
我有一个主页,其中有 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>
最佳答案
您可以在没有 javascript 的情况下通过更改事件图像的 z-index 来执行此操作。基本上将悬停图像移到前面:
.img{
position: relative;
z-index: 1;
}
.img:hover{
z-index: 2;
}
关于javascript - HTML/CSS 图像缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46409750/