title: Image Change on Hover using CSS
body: <p>What is wrong with this code? I have been working on this for hours and cannot figure out why the button.png will now show up but the link is there in the location of the "one" div..?</p>
  
  <pre><code>#one
  {
  position: fixed;
  left:225px;
  top:702px;
  }
  
  .button
  {
  display: block;
  width: 40px;
  height: 40px;
  background: url('images/button.png') bottom;
  text-indent: -99999px;
  }
  
  .button:hover
  {
  background-position: 0 0;
  background-color: transparent; 
  border-style: none;
  }
  </code></pre>
  
  <p>_</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="map"&gt;
          &lt;img src="images/map.png"/&gt;
      &lt;/div&gt;
  
      &lt;div id="one"&gt;
          &lt;a class="button" href="images/one.jpg"/&gt;
              &lt;img src="images/button.png"/&gt;
          &lt;/a&gt; 
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>