css - 图像悬停与

Question

我希望我的图片在其上悬停另一张图片。

JSFIDDLE

<a href="#"> <img src="http://img122.imageshack.us/img122/1512/spiderman4teaserwo2.jpg" /> </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

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