Zeigen Sie einen Bereich bei Hover von Eltern und verstecken Sie es mit Verzögerung nur mit CSS

Question

Ich muss eine span auf Hover Link anzeigen und ausblenden Sie es bei mouseout nach 2 Sekunden. Unten ist der Code, was ich getan habe. Dies kann mit JS erfolgen. Allerdings brauche ich CSS einzige Lösung.

Die aktuelle Geschwindigkeit zum Anzeigen der Spanne ist perfekt. Ich muss es nur nach 2 Sekunden auf Mouseout verstecken.

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

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

Answer 1

Sie können den dritten Parameter hinzufügen

.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

Sicher, können Sie dieses Verhalten leicht mit einer CSS-Animation bekommen. Die 2s Animationsspielzeit passiert nach dem 0.5s Opazitätsübergang. Wenn Sie also möchten, dass das Ganze zwei Sekunden dauert, können Sie die Animationszeit auf 1.5s ändern.

.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>

Answer 3

Sie transition-delay verwenden können, um den Übergang, um es nach 2s verschwinden:

.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/