css - 如何在悬停时显示另一张图片？

Question

每当有人切换悬停状态时，我都会尝试将另一张图片覆盖在一张图片上。

如何显示第二张图片？

<a href="#"> <img src="my-image-url" /> </a>

Answer 1

给你，将鼠标悬停在 div 上时会显示图像:

示例:jsFiddle

HTML:

<div><a href="#"> <img src="http://img122.imageshack.us/img122/1512/spiderman4teaserwo2.jpg" /> </a>
</div>

CSS:

div:hover img{
   opacity: 1;
}
img{
 position: relative;
    width :100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}