title: CSS :hover image switch with child selectors
body: <p>I'm using only CSS to switch images on hover using child selectors. Each image is displayed as an inline-block within a containing div, creating a grid of images.</p>
  
  <p>It is working beautifully, except for a weird twitch— </p>
  
  <p>a.) when the the mouse hovers over the <strong>first</strong> image in the containing div; <em>AND</em> b.) when the page has scrolled any distance, the entire page jumps back up to the top. </p>
  
  <p>This twitch is only provoked by hovering over the first image; it does not occur when the mouse moves between any other images, regardless of position.</p>
  
  <p>The effect is visible here: <a href="https://jsfiddle.net/continuist/kognrzof/9/" rel="nofollow noreferrer">https://jsfiddle.net/continuist/kognrzof/9/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>/* CONTAINER DIV */
  
      #rocks {width: auto;}
  
  /* EACH IMAGE ELEMENT */
  
      .foo img {width:30%;} 
  
      .foo img:first-child{display:inline-block;}
      .foo img:last-child{display:none;}
  
      .foo:hover img:first-child{display:none;}
      .foo:hover img:last-child{display:inline-block;}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="rocks"&gt;
      &lt;a class="foo" href="#"&gt;
         &lt;img src="/img/item1.png"&gt;
         &lt;img src="/img/item1hover2.svg"&gt;
      &lt;/a&gt;
      &lt;a class="foo" href="#"&gt;
         &lt;img src="/img/item1.png"&gt;
         &lt;img src="/img/item1hover.svg"&gt;
      &lt;/a&gt;
      &lt;a class="foo" href="#"&gt;
         &lt;img src="/img/item3.png"&gt;
         &lt;img src="/img/item3hover.svg"&gt;
      &lt;/a&gt;
  
      ...
  
  &lt;/div&gt;
  </code></pre>
  
  <p>In the photo, each of these images switches on :hover. But when the page scrolls, and the mouse hovers over the FIRST image (the topmost, leftmost) on the page, the entire page jumps back to the top. </p>
  
  <p><a href="https://i.stack.imgur.com/dgPq3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dgPq3.jpg" alt="Screenshot of the CSS/HTML above"></a></p>