我有一个 div,里面有另外两个 div,它们是绝对定位的,并且有一个过渡属性。
在鼠标悬停时,我需要通过更改 bottom
属性来移动第一个 div,并通过将 opacity
更改为显示第二个(默认情况下不透明度为 0) 1.
问题是文本显示在彼此之上,所以我需要第二个元素等待第一个元素的过渡,当鼠标离开包装器时相反,所以我给第二个元素一个过渡延迟, 哪种修复了这个。但是由于过渡延迟,当鼠标离开框时仍然存在问题,第二个元素保持可见一段时间,而第一个元素移回其初始位置。
.wrapper{
position: relative;
width: 200px;
height:300px;
background-color: #777;
}
.title{
position: absolute;
bottom: 10px; /* becomes 120px on hover */
transition: bottom .6s ease;
}
.wrapper:hover .title{
bottom: 120px;
}
.text{
position: absolute;
bottom: 10px;
opacity: 0; /* becomes on hover 1 */
transition: opacity .6s ease .6s; /* added transition delay to wait for the first element to go up */
}
.wrapper:hover .text{
opacity: 1;
}
<div class="wrapper">
<div class="title">My title</div>
<div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis, a.</div>
</div>
是否有一些解决方法(没有 javascript)?
最佳答案
您可以覆盖悬停时的过渡延迟以反转效果:
.wrapper{
position: relative;
width: 200px;
height:400px;
background-color: #777;
}
.title{
position: absolute;
bottom: 10px; /* becomes 120px on hover */
transition: bottom .6s ease .6s;
}
.wrapper:hover .title{
bottom: 120px;
transition: bottom .6s ease;
}
.text{
position: absolute;
bottom: 10px;
opacity: 0; /* becomes on hover 1 */
transition: opacity .6s ease 0s; /* added transition delay to wait for the first element to go up */
}
.wrapper:hover .text{
transition: opacity .6s ease .6s;
opacity: 1;
}
<div class="wrapper">
<div class="title">My title</div>
<div class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facilis, a.</div>
</div>
关于html - 如何创建不同的过渡/动画延迟?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55025831/