CSS悬停在显示另一个不透明的图像上

Question

所以我首先要做的是使图像 1 具有低不透明度，而图像 2 没有不透明度，我想要的是使图像 2 和 1 在悬停在图像 1 上时显示为完全不透明。但我不知道如何让它们都出现所以我希望有人知道是否有更好的方法来做到这一点或告诉我如何。`` CSS：

.img1 {
    height:120px;
    width:120px;
    position:fixed;
    bottom:0px;
    right:-20px;
        opacity: 0.1;
    }
img:hover {
        opacity: 1.0;
    }
.img2{
        opacity: 0;
    position:fixed;
    right:50px;
    bottom:70px;
    }

HTML：

    <img src="img1.png" class="img1">
    <img src="img2.png" class="img2">

所以我想要的是，当您将鼠标悬停在图像 1 上时，图像 2 和 1 显示完全不透明，我希望有人可以帮助我，谢谢。

Answer 1

您可以使用+, Adjacent sibling combinator or ~, General sibling combinator

.img1:hover ~ .img2 , .img1:hover {
     opacity: 1.0;
}

或

.img1:hover + .img2 , .img1:hover {
     opacity: 1.0;
}