Html 基本的 CSS 悬停图像交换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15468037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Basic CSS Hover Image-Swap?
提问by Rowan K.
I'm a super beginner at web development and I have a question about trying to "swap" two images.
我是网络开发的超级初学者，我有一个关于尝试“交换”两个图像的问题。
I have this CSS and markup written but for some reason it does not seem to be working. The second image that's supposed to swap in when hovering over the first image simply lies on top of the first image on the page.
我写了这个 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:
HTML：
<div class="home">
<a href="#">
<img src="style/images/home.png" width="65" height="18" alt="" />
</a>
</div>
I'm not sure what's going wrong, and I'd be very appreciative if someone can help me. If there's another better way to do this, I would be definitely open to that too.
我不确定出了什么问题，如果有人可以帮助我，我将不胜感激。如果有另一种更好的方法来做到这一点，我肯定也会对此持开放态度。
回答by ktm5124
One way to do it is to forget the <img>, and on :hoverchange the background-image URL.
一种方法是忘记<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;
}
Working example: http://jsfiddle.net/c9sRa/
工作示例：http: //jsfiddle.net/c9sRa/
If you put your cursor over the wolf it will change to a picture tiger cubs :-)
如果您将光标放在狼上，它会变成老虎幼崽的图片:-)
