gpt4 book ai didi

html - 基本 CSS 悬停图像交换?

转载 作者:太空宇宙 更新时间:2023-11-04 13:36:26 26 4
gpt4 key购买 nike

我是网络开发的 super 初学者,我有一个关于尝试“交换”两张图片的问题。

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

我不确定出了什么问题,如果有人能帮助我,我将不胜感激。如果有另一种更好的方法来做到这一点,我肯定也会接受。

最佳答案

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

如果你把光标放在狼上,它会变成一张小虎的图片 :-)

关于html - 基本 CSS 悬停图像交换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15468037/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com