transition与visibility与延时显示实例页面

回到相关文章 »

代码:

CSS代码:
.trans-delay{
    -webkit-transition:visibility 0s linear;
    -moz-transition:visibility 0s linear;
    -o-transition:visibility 0s linear;
    -ms-transition:visibility 0s linear;
    transition:visibility 0s linear;
}
.image-delay{position:absolute; margin-top:20px; visibility:hidden;
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -ms-transition-delay:0s;
    -o-transition-delay:0s;
    transition-delay:0s;
}
.hover-delay:hover .image-delay{
    visibility:visible;
    -webkit-transition-delay:0.5s;
    -moz-transition-delay:0.5s;
    -ms-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    transition-delay:0.5s;
}
                
HTML代码:
<div class="hover-delay">
    <img src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" class="trans-delay image-delay" />
    <a href="#">经过我显示图片</a>
</div>