CSS懸停在圖像上顯示另一個不透明

Question

因此，我第一次做的是使圖像1有一個低透明度和圖像2沒有不透明度，我想要的是讓圖像2和1在圖像上方懸停時出現在完全不透明狀態1.但我不知道如何讓他們同時出現，所以我希望有人知道，如果有這樣或者告訴我how.`` 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; 
}