html - 考虑到标志是内容，如何在悬停时显示不同的图像？

Question

考虑到 Logo 更像是网页上的内容(而不是装饰)，我发现 this markup适合我的网站:

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

在这种情况下，我应该如何创建翻转/悬停效果，以便在悬停时显示不同的 Logo 图像？ (例如，实际 Logo 是黑白的；悬停时，会显示彩色 Logo 图像。)

做这样的事情感觉很愚蠢(但我没有更好的想法):

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

您可以使用 box-sizing 属性在 background 中加载第二张图片并在 hover 上显示它:HTML 基础:

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

CSS 基础:

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