Question

I am wondering how would I write the CSS selector so that when the user hovers over img.screenshot, img.icon would change its css to display:block;.

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

img.icon { display:none; }

So far, I have the following statement but am unsure how to select the node when it is on its same level:
div.box > img.screenshot:hover

Answer 1

Easy, sibling selectors:

Adjacent Sibling Selector

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

General Sibling Selector

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