基础CSS悬停图像交换？

Question

我是一个网站开发的超级初学者，我有一个问题，想要“交换”两个图像。

我已经写好了这个CSS和标记，但出于某些原因它似乎不起作用。当悬停在第一张图片上时，应该会切换到第二张图片，但实际上第二张图片只是覆盖在第一张图片上。

CSS：

.home  {
  margin: 0;
  padding: 0;
  background: url('images/onhome.png') no-repeat;
}

.home a, .nav a:link, .nav a:visited {
  display: block;
  width: 90px;
  height: 25px;
}

.home a:hover img {
  visibility: hidden;
}

HTML:

<div class="home">
  <a href="#">
    <img src="style/images/home.png" width="65" height="18" alt="" />
  </a>
</div>

我不确定出了什么问题，如果有人能帮我解决，我会非常感激。如果有更好的方法，我也非常愿意尝试。

- Rowan K.

---

你的背景图像不是 img。尝试使用不同的图像和 background-position。 - Oliver Tappin

@Titanium 不，它不会。 - James Coyle

@jimjimmy1995 - 你说得对，我有点过于急躁了。 - Oliver Tappin

工作范例：http://jsfiddle.net/c3bqV/ - Oliver Tappin

最好的做法是将悬停图像放在同一张图片中，这样在加载悬停图像时不会显示空白/空格。 - Oliver Tappin

Answer 1

一种方法是忘记 <img> 标签，在 :hover 时改变背景图片的URL。

#home {
    background: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/grey-wolf_565_600x450.jpg) no-repeat;
    height: 600px;
    width: 600px;
}

#home:hover {
    background: url(http://25.media.tumblr.com/tumblr_m6fmnhxL3B1r7wu2mo1_500.jpg)  no-repeat;
}

实例演示: http://jsfiddle.net/c9sRa/

如果你将光标放在狼上，它会变成一张老虎幼崽的图片 :-)

- ktm5124

---

非常感谢您的回复，我现在就去尝试一下！ - Rowan K.

有很多方法可以做到这一点。另一种方法是使用JavaScript。我想最好的方法取决于你的情况。 - ktm5124

由于某些原因，我现在甚至无法看到页面上的完整图像。这是因为我的背景图案遮盖了它吗？尽管如此，悬停效果似乎还是有效的。 - Rowan K.

你可能需要重新定义父元素的宽度/高度。在我的例子中，我设置了 div 的宽度/高度以适应两个图像。这就是 CSS 解决方案的好处 :-p - ktm5124

好的，我做到了，现在它正在运行！非常感谢您的帮助。 - Rowan K.