基本的CSS悬停图像交换？ [英] Basic CSS Hover Image-Swap?

问题描述

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

我写了这个CSS和标记，但由于某种原因，它似乎没有工作。当将鼠标悬停在第一张图片上时，应该交换的第二张图片仅位于页面上第一张图片的顶部。

CSS：

  .home {
保证金： 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.pngwidth =65height =18alt =/> 
< / a> 
< / div> 
  

我不确定发生了什么问题，如果有人能帮助我，我会非常感激。如果还有另一种更好的方式来做到这一点，我也绝对会这样做。

解决方案

忘记< img> ，然后在：hover 更改背景图片网址。

  #home {
 background：url（http://images.nationalgeographic.com/wpf/media-live/photos/000/005 /cache/grey-wolf_565_600x450.jpg）不重复; 
 height：600px; 
 width：600px; 
} 
 
 #home：hover {
 background：url（http://25.media.tumblr.com/tumblr_m6fmnhxL3B1r7wu2mo1_500.jpg）no-repeat; 
} 
  

工作示例： http://jsfiddle.net/c9sRa/

如果将光标放在狼身上，它会变成一张照片虎崽： - ）

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:

.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>

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.

解决方案

One way to do it is to forget the <img>, and on :hover change the background-image 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/

If you put your cursor over the wolf it will change to a picture tiger cubs :-)

这篇关于基本的CSS悬停图像交换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！