title: How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?
body: <p>I'm trying to change one image to another on mouseover.  Specifically, when the visitor hovers over this:</p>
  
  <p><img src="https://i.stack.imgur.com/OywDf.png" alt="enter image description here"></p>
  
  <p>The image will change to this:</p>
  
  <p><img src="https://i.stack.imgur.com/aRJOk.png" alt="enter image description here"></p>
  
  <p><strong>The Current Code</strong></p>
  
  <p>I'd like to do this as lightweight as possible.  But the image-background CSS thing doesn't work for me.  My code is as follows:</p>
  
  <pre><code>&lt;div id="featured-box-right"&gt;&lt;a href="/videos/"  
  target="_self"&gt;&lt;img src="../images/box-featured-home-right.png" title="videos" 
  alt="videos" width="300" height="150"&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But when I do this to the CSS:</p>
  
  <pre><code>#featured-box-right a:hover
  {
  background-image: url(../images/box-featured-home-right-hover.png); 
  }
  </code></pre>
  
  <p>The effect doesn't turn out right; it's not a background.  It's an actual image.  Any guidance as to how I can achieve this as lightweight as possible would be greatly appreciated!</p>