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;
}