Considering logo is content, how to display a different image on hover?

Question

Considering logo is more like content (than decoration) on a webpage, I find this markup suitable for my website:

<h1 id="logo">
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow">
  </a>
</h1>

Given the case, how should I go about creating a rollover/hover effect such that a different logo image is displayed on hover? (E.g. the actual logo is black-and-white; on hover, the colorful logo image is shown.)

Doing something like this feels stupid (but I have no better ideas in mind):

HTML:

<h1 id="logo">
  <a href="http://stackoverflow.com">
    <img id="logo-img1" src="logo1.png" alt="Stack Overflow">
    <img id="logo-img2" src="logo2.png" alt="Stack Overflow">
  </a>
</h1>

CSS:

#logo #logo-img2 {
  display: none;
}
#logo:hover #logo-img1 {
  display: none;
}
#logo:hover #logo-img2 {
  display: inline;
}

Answer 1

You could use the box-sizing properties to load second image in background and show it on hover : HTML base:

<h1 id="logo">
  <a href="http://stackoverflow.com">
    <img src="http://lorempixel.com/100/100/abstract/2" alt="Stack Overflow">
  </a>
</h1>

CSS base:

h1 a img { 
  background:url(http://lorempixel.com/100/100/people/9);/* preload img 2 here */
  box-sizing:content-box;/* safe reset , use prefix */
}
h1 a:hover  img {
  height:0;
  width:0;
  padding:50px;
}

DEMO

Answer 2

You have the right idea, but your :hover is in the incorrect place and the selectors are a bit off.

This should work, and is a bit more efficient for page loading!

HTML:

<div id="logo">
  <a href="http://stackoverflow.com">
    <img id="logo-img" src="logo1.png" alt="Stack Overflow">
  </a>
</div>

CSS:

#logo #logo-img {
    content:url("logo1.png");
}

#logo #logo-img:hover {
    content:url("logo2.png");
}