Show a span on hover of parent and hide it with delay using only CSS
<p>I need to show a <code>span</code> 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 <strong>CSS only solution</strong>. </p>

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hoverBox span {
  opacity: 0;  
  transition: opacity 0.5s;
}
.hoverBox:hover span {
  opacity: 1;  
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hoverBox"&gt;Mouse hover &lt;span&gt;Hello&lt;/span&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>