基本的CSS悬停图像交换？

我是一个在网络开发超级初学者，我有一个关于试图“交换”两个图像的问题。基本的CSS悬停图像交换？

我有这个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>

我不知道发生了什么事情错了，我会很感激，如果有人能帮助我。如果还有另一种更好的方法来做到这一点，我也绝对会这样做。

来源

2013-03-18 Rowan K.

你的背景图片是不是'img'。尝试使用不同图像的'background-position'来代替。 – 2013-03-18 00:37:08

@Titanium不，它不。 – 2013-03-18 00:38:20

@ jimjimmy1995 - 你说得对，我在那里跳了一枪。 – 2013-03-18 00:39:13

一种方法是忘记<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/

如果你把光标移到狼它将改变一个图片幼虎:-)

来源

2013-03-18 00:39:47 ktm5124

非常感谢您的回复，现在就试试看看！ – 2013-03-18 00:41:59

有很多方法可以做到这一点。另一个是使用JavaScript。我想最好的办法取决于你的情况。 – ktm5124 2013-03-18 00:44:23

由于某种原因，现在我甚至无法在页面上看到完整的图像。是否因为我有一个覆盖它的背景图像模式？不过，它看起来像悬停效果正在起作用。 – 2013-03-18 00:49:24

基本的CSS悬停图像交换？

回答

相关问题