title: Css Transition on hover for child element
body: <p>Im trying to pause the display of a child element when it's parent is hovered over.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;span&gt;
      &lt;div&gt;This Is The Child&lt;/div&gt;
      Some Text in the span
  &lt;/span&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>span { 
      position: relative; 
  }
  span div { 
      display: none;
      width: 0px;
      opacity: 0;
  
      transition: width 5s;
      -webkit-transition: width 5s;
  
      transition: opacity 5s;
      -webkit-transition: opacity 5s;
  }
  span:hover div {
      display: inline-block;
      width: 150px;
      opacity: 1;
  }​
  </code></pre>
  
  <p>As of right now, when the span is hovered, the div has no delay before it is shown. How would I go about fixing it so there is a pause?</p>
  
  <p>Fiddle here: <a href="http://jsfiddle.net/SReject/vmvdK/" rel="noreferrer">http://jsfiddle.net/SReject/vmvdK/</a></p>
  
  <p>A few notes:<br>
  I originally tried to transition the display, but as Edward pointed out, that isn't possible, and have sense tried the above which, also, isn't working</p>
  
  <p><b>SOLVED</b></p>
  
  <p>It would appear that any "display" property in the "transition to" styling will stop any transition animations from happening. To work around this. I set the width of the child to be displayed to 0px and have it be completely transparent. Then in the "transition to" styling, I set the correct width, and make the div solid:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;span&gt;
      &lt;div&gt;This Is The Child&lt;/div&gt;
      Some Text in the span
  &lt;/span&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>span { 
      position: relative; 
  }
  span div { 
      position: absolute;
  
      width: 0px;
      opacity: 0;
      transition: opacity 5s;
      -webkit-transition: opacity 5s;
  }
  span:hover div {
      width: 150px;
      opacity: 1;
  }​
  </code></pre>
  
  <p>Fiddle here: <a href="http://jsfiddle.net/SReject/vmvdK/" rel="noreferrer">http://jsfiddle.net/SReject/vmvdK/</a></p>