Basic CSS Hover Image-Swap?

后端未结

关注

 1  1139

遇见更好的自我

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 s

相关标签:

1条回答

無奈伤痛

2021-01-21 21:49

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 :-)

0 讨论(0)