我希望我的图片在其上悬停另一张图片。
<a href="#"> <img src="http://img122.imageshack.us/img122/1512/spiderman4teaserwo2.jpg" /> </a>
答案 0 :(得分:3)
在这里,当您将鼠标悬停在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;
}
答案 1 :(得分:-1)
DEMO: http://jsfiddle.net/pDeKy/1/
<a href="#">
<img src="http://placekitten.com/200" />
<img src="http://placekitten.com/100" class="hovery" />
</a>
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;
}