親のホバリングにスパンを表示し、CSSのみを使用して遅延で非表示にします

Question

リンクのホバーにspanを表示し、2秒後にマウス出力時に非表示にする必要があります。以下は、私が行ったコードです。これは、JSを使用して行うことができます。しかし、私はCSSのみの解決策が必要です。

スパンを表示する現在の速度は完璧です。 2秒後にmouseoutで非表示にするだけです。

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

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

Answer 1

あなたはそれが2秒後に消えるようにtransition-delayを使用することができます

.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

確かに、あなたは、CSSアニメーションで簡単にこの動作を得ることができます。 2sアニメーションの再生時間は、0.5sの不透明度のトランジションの後に発生するため、すべてを2秒にしたい場合は、アニメーションの時間を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>

Answer 3

を移行するために三番目のパラメータを追加することができます。

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