Transition delay only on hover out

April 15, 2022

How do I only apply the transition-delay on hover out only?

For example, if you hover over the div, the overlaydiv::before should appear, it will delay for 1s as expected for hover in because I set the transition-delay on it, but I only want this delay on hover out.

I found this article but it’s not relevant in my case
How to reset/control transition delay when hover out?

div {
  width: 300px;
  height: 300px;
  background-color: blue;
  position: relative;
}

div::before {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition-delay: 1s;
}

div:hover::before {
  opacity: 1;
}

<div></div>

>Solution :

You can try

div::before {
  content: '';
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: .5s ease-in-out 1s;
}

div:hover::before {
  opacity: 1;
  transition: .0s ease-in-out 0s; 
}

It will have transition delay only on hover-out