I want to remove the delay I applied after leaving the hover state
I have a little box where I applied a hover effect with different delays. Everything works fine except my paragraph. I did a delay of 4.5s so it will pop out after the .goals-title is dissapeared. But after I leave the hover state it fades out way to slow. Is there a way to remove the delay on leaving the hover state.
/*thats the delay with the transition*/
.goals-text {
transition: opacity 0.75s ease-in-out;
transition-delay: 4.5s;
opacity: 0%;
}
/*the hover effect*/
.goals:hover > .goals-text {
opacity: 100%;
}
>Solution :
You can set a transition-delay that is longer when you hover the element :
/*thats the delay with the transition*/
.goals-text {
transition: opacity 0.75s ease-in-out;
transition-delay: 0s;
opacity: 0%;
}
/*the hover effect*/
.goals:hover > .goals-text {
opacity: 100%;
transition-delay: 2s;
}<div class="goals">
v hover here v
<div class="goals-text">The animation starts after 2s on hover but immediately on mouse out</div>
^ hover here ^
</div>