Show a span on hover of parent and hide it with delay using only CSS

Question

I need to show a span on hover of link and hide it on mouseout after 2 seconds. Below is the code what I have done. This can be done using JS. However, I need CSS only solution.

The current speed to show the span is perfect. I just need to hide it on mouseout after 2 seconds.

.hoverBox span {
  opacity: 0;  
  transition: opacity 0.5s;
}
.hoverBox:hover span {
  opacity: 1;  
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>

Answer 1

You can add the third parameter to transition

.hoverBox span {
  opacity: 0;  
  transition: opacity 0.5s 1s;
}
.hoverBox:hover span {
  opacity: 1;  
  transition: opacity 0.5s;
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>

Answer 2

Sure, you can get this behavior easily with a CSS animation. The 2s animation play time happens after the 0.5s opacity transition, so if you want the whole thing to be two seconds, you can change the animation time to 1.5s.

.hoverBox span {
    opacity: 0;  
    transition: opacity 0.5s;
}
.hoverBox:hover span {
    opacity: 1;  
    animation: glimpse 2s linear;
    animation-fill-mode: forwards; /* This is to make it only play once */
}
@keyframes glimpse {
    0% { opacity: 1; }
    99% { opacity: 1; }
    100% { opacity: 0; }
}

<div class="hoverBox">Mouse hover <span>Hello</span></div>