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>

Matej Žvan · Accepted Answer · 2016-07-14T14:58:51.183

7

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>

edited Jul 14 '16 at 14:58

answered Jul 14 '16 at 13:36

Matej Žvan

758
4
13

score 1 · Answer 2 · answered Jul 14 '16 at 13:29

1

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>

answered Jul 14 '16 at 13:29

TylerH

20,799
66
75
101

This isn't I am looking for. It should hide on mouse out after 2s. Anyways Thanks for trying. – Tushar Jul 14 '16 at 13:36
@Tushar Ah, well that's pertinent info :-P In that case even a transition adjustment would work like Matej's answer. – TylerH Jul 14 '16 at 13:38

score 1 · Answer 3 · answered Jul 14 '16 at 13:39

You can use transition-delay to make it disappear after 2s:

.hoverBox span {
  opacity: 0;  
  transition: opacity 0.5s; // or transition:opacity 0.5s 2s; the 3rd param is the delay.
  transition-delay:2s;
}
.hoverBox:hover span {
  opacity: 1;  
  transition-delay:0s;
}

https://jsfiddle.net/bk9vnubx/

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

3 Answers3

Linked