title: CSS: image link, change on hover
body: <p>I have an image that is a link. I want to show a different image when the user hovers over the link. </p>
  
  <p>Currently I'm using this code:</p>
  
  <pre><code>&lt;a href="http://twitter.com/me" title="Twitter link"&gt;
  &lt;div id="twitterbird" class="sidebar-poster"&gt;&lt;/div&gt;&lt;/a&gt;
  
  div.sidebar-poster {
  margin-bottom: 10px;
  background-position: center top;
  background-repeat: no-repeat;
  width: 160px;
  }
  #twitterbird {
  background-image: url('twitterbird.png');
  }
  #twitterbird:hover {
  background-image: url('twitterbird_hover.png');
  }
  </code></pre>
  
  <p>But I'm having loads of problems: the div isn't picking up the CSS rules (the element just isn't showing the related CSS rules when I view it in Firebug). </p>
  
  <p>Perhaps this is because (as I know) this is invalid HTML: you can't put an <code>&lt;a&gt;</code> around a <code>&lt;div&gt;</code>. However, if I switch to <code>&lt;span&gt;</code> then it seems I get bigger problems, because <a href="https://stackoverflow.com/questions/4716284/css-puzzle-how-to-add-background-image-and-set-height-width-on-empty-span">you can't set a height and width on a span reliably</a>. </p>
  
  <p>Help! How can I do this better?</p>