title: Toggle visability child on hover parent
body: <p>I'd like to show my image caption (eg. Name of image) when I hover the figure.</p>
  
  <p>This is my HTML:  </p>
  
  <pre><code>&lt;div class="thumbnail-grid flex"&gt;
      &lt;a href="#" class="flex-item"&gt;
          &lt;figure class="i1"&gt;
              &lt;figcaption class="hide"&gt; caption blabla
                  &lt;img src="img/view.png"/&gt; 
              &lt;/figcaption&gt;
          &lt;/figure&gt;
      &lt;/a&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>I tried to make a function in Javascript: </p>
  
  <pre><code>var text = document.querySelector('figcaption');
  
  document.querySelector('figure').onMouseOver = function() {
      text.classList.remove('hide');
  }
  
  document.querySelector('figure').onMouseOut = function() {
      text.classList.add('hide');
  }
  </code></pre>
  
  <p>In my CSS I set .hide to display: none; But my function doesn't work. </p>
  
  <p>Can anybody help me out? </p>
  
  <p>live demo: <a href="http://jsfiddle.net/e27Dt/613/" rel="nofollow">http://jsfiddle.net/e27Dt/613/</a></p>