处于同一级别的悬停状态的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 */ }