css - 同じレベルにあるホバー状態のCSSセレクター

Question

img.screenshotユーザーがにカーソルを合わせたときにcssを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

簡単な兄弟セレクター：

隣接する兄弟セレクター

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

一般的な兄弟セレクター

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