title: Show a span on hover of parent and hide it with delay using only CSS
body: <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>