Remove delay after leaving the hover-CodePudding

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%;
}

CodePudding user response：

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 >
  v hover here v
  <div >The animation starts after 2s on hover but immediately on mouse out</div>
  ^ hover here ^
</div>