title: Considering logo is content, how to display a different image on hover?
body: <p>Considering logo is more like content (than decoration) on a webpage, I find <a href="https://stackoverflow.com/a/669847">this markup</a> suitable for my website:</p>
  
  <pre><code>&lt;h1 id="logo"&gt;
    &lt;a href="http://stackoverflow.com"&gt;
      &lt;img src="logo.png" alt="Stack Overflow"&gt;
    &lt;/a&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>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.)</p>
  
  <p>Doing something like this feels stupid (but I have no better ideas in mind):</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h1 id="logo"&gt;
    &lt;a href="http://stackoverflow.com"&gt;
      &lt;img id="logo-img1" src="logo1.png" alt="Stack Overflow"&gt;
      &lt;img id="logo-img2" src="logo2.png" alt="Stack Overflow"&gt;
    &lt;/a&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>#logo #logo-img2 {
    display: none;
  }
  #logo:hover #logo-img1 {
    display: none;
  }
  #logo:hover #logo-img2 {
    display: inline;
  }
  </code></pre>