3

我是 Web 开发的超级初学者，我有一个关于尝试“交换”两个图像的问题。

我编写了这个 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>

我不确定出了什么问题，如果有人可以帮助我，我将不胜感激。如果有另一种更好的方法可以做到这一点，我肯定也会对此持开放态度。

4

1 回答 1

13

一种方法是忘记<img>, 和 on: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/

如果您将光标放在狼上，它会变成图片虎崽 :-)

于 2013-03-18T00:39:47.023 回答