title: CSS display block on hover
body: <p>I've following HTML, the div <code>.info</code> has <code>display:none</code> by default, I want to change that to <code>display:block</code> on hover. I'm trying following CSS but the <code>:hover</code> does not work.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="items"&gt;
      &lt;div class="item"&gt;
          &lt;a href="#"&gt;
              &lt;div clas="info"&gt;
  
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#items .item a .info{
      display: none;
  }
  
  #items .item a .info:hover{
      display: block;
  }
  </code></pre>
  
  <p><strong>JSFiddle:</strong>
  <a href="http://jsfiddle.net/qcDtF/" rel="noreferrer">http://jsfiddle.net/qcDtF/</a></p>
  
  <p>Thanks.</p>