CSS選擇器懸停狀態是在同一水平

Question

我在想如何編寫CSS選擇器，以便當用戶懸停在img.screenshot上時，img.icon會將其css更改爲display:block;。

<div class="box"> 
    <img class="screenshot" src="#"> 
    <img class="icon"  src="#"> 
    <p class="desc">...</p> 
</div> 

img.icon { display:none; } 

到目前爲止，我有以下的說法，但我不知道該如何選擇節點時，它是在其同級別： div.box > img.screenshot:hover

Answer 1

簡單，同胞選擇：

Adjacent Sibling Selector

img.screenshot:hover + img.icon { /* styles here */ } 

General Sibling Selector

img.screenshot:hover ~ img.icon { /* styles here */ }