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;
}

Answer 2

演示：http: //jsfiddle.net/pDeKy/1/

HTML

<a href="#">
    <img src="http://placekitten.com/200" />
    <img src="http://placekitten.com/100" class="hovery" />
</a>

CSS

a {
    position: relative;
}
/* Make our images sit on top of one and other  */
 a img {
    position: absolute;
}
.hovery {
    display: none;
}
a:hover .hovery {
    display: block;
}