title: Hover li change image using css
body: <p>tried to find a way to change a main image when hovering over an LI</p>
  
  <p>Looking at <a href="https://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css">Using only CSS, show div on hover over &lt;a&gt;</a> I thought I could make it work, but when I moved the div it of course no longer worked.</p>
  
  <p>Here is how I would do it with JavaScript - can you show me how to do the same with pure CSS on the same html?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  var myImages = {li1:"image1.jpg",li2:"image2.jpg",li3:"image3.jpg"};
  window.onload=function() {
    var lis = document.getElementById('myList').getElementsByTagName('li');
    for (var i=0;i&lt;lis.length;i++) {
      lis[i].onmouseover=function() {
         document.getElementById('image1').src=myImages[this.id];
      }
    }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;img id="image1" /&gt;
  &lt;ul id="myList"&gt;
  &lt;li id="li1"&gt;show image1&lt;/li&gt;
  &lt;li id="li2"&gt;show image2&lt;/li&gt;
  &lt;li id="li3"&gt;show image3&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>