我有 2 张图像彼此重叠,绝对定位,在我的示例中它们是方形的,但在我的实际元素中它们是 png,边界有一些透明度,因此需要隐藏后面的图像,直到它出现在悬停。
我的问题是我需要转换有某种延迟,以便背面图片出现在顶部图片之前一点,这样您就看不到中间的背景。我做了一个 fiddle 来说明这一点: http://jsfiddle.net/L21sk0oh/
您可以从背景中清楚地看到红色,这是不应该发生的。还有一些奇怪的 Action 正在进行,我在实际元素中没有注意到这一点。
还有我的 HTML:
<div class="product1">
<img class="active" src="http://lorempixel.com/400/200/sports" alt="">
<img class="inactive" src="http://lorempixel.com/400/200/" alt="">
</div>
还有我的CSS:
body{
background: red;
}
.product1{
position: relative;
width: 400px;
height: 200px;
}
img{
position: absolute;
top:0;
left:0;
}
.product1 img.active{
transition: all 1s ease-in-out;
opacity: 1;
}
.product1 img.inactive{
transition: all 1s ease-in-out;
opacity: 0;
}
.product1:hover img.active{
opacity: 0;
}
.product1:hover img.inactive{
opacity: 1;
}
最佳答案
您可以为 transition-delay
property 指定一个值.
在这种情况下,我向 .product1 img.active
的转换速记添加了一个 1s
延迟:
.product1 img.active {
transition: all 1s 1s ease-in-out;
opacity: 1;
}
以上等同于:
.product1 img.active{
transition: all 1s ease-in-out;
transition-delay: 1s;
opacity: 1;
}
确保您添加了 transition shorthand properties以正确的顺序。
关于html - 延迟 CSS 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28567643/