css - 位于同一级别的悬停状态的 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

简单的兄弟选择器：

相邻兄弟选择器

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

通用兄弟选择器

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