如果有人能告诉我哪里出错了,只是在徘徊,试图让一个图像淡出以在悬停时显示它下面的另一个图像。但是,我似乎无法让两个图像重叠。任何帮助将不胜感激!
.HTML
<div id="content" class="sixteen columns textcenter box">
<p>
<img class="top" src="img/homepageimg2.jpg" alt="Photography Thumbnail" align="center">
<img class="bottom" src="img/homepageimg22.jpg" alt="Photography Thumbnail" align="center">
</p>
</div>
.CSS
#content {
z-index:10;
position:relative;
background-image:url(../img/backgroundindex.jpg);
background-repeat: repeat;
padding-top: 50px;
padding-bottom:50px;
}
#content img{
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#content img.top hover {
opacity:0;
}
谢谢!
悬停是一个伪像,所以如果你想在悬停在类"top"的img(#content 的孩子)时应用效果,你需要使用以下形式:
#content img.top:hover {
opacity: 0;
}
尝试在 .top 和 .bottom 上使用绝对定位(加上 top:0、bottom:0 等),并在其父容器上使用相对定位。确保 .top 的 z 索引高于 .bottom。
我已经在CodePen上设置了这种效果的完整演示:http://cdpn.io/aAjBb
演示 HTML:
<div class="hover-swap">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg" class="top"/>
<img src="http://myhswm.org/images/sized/images/animals/tuxedo_kittens-256x256.jpg" class="bottom"/>
</div>
演示 CSS:
.hover-swap {
position: relative;
height: 256px;
width: 256px;
}
.hover-swap .top {
opacity: 1;
z-index: 2;
}
.hover-swap .bottom {
opacity: 1;
z-index: 1;
}
.hover-swap:hover .top {
opacity: 0;
}
.hover-swap .bottom, .hover-swap .top {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}