title: Display child div when hovering over parent div - Javascript
body: <p>I currently have a div that contains several divs that use the same class. It looks like this,</p>
  
  <pre><code>&lt;div class="deck-content"&gt;
      &lt;div class="deck-box"&gt;TEST
         &lt;div class="deck-hidden"&gt;
            &lt;span class="glyphicon glyphicon-eye-open eye-open" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-pencil pencil" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-remove remove" aria-hidden="true"&gt;&lt;/span&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="deck-box"&gt;TEST
         &lt;div class="deck-hidden"&gt;
            &lt;span class="glyphicon glyphicon-eye-open eye-open" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-pencil pencil" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-remove remove" aria-hidden="true"&gt;&lt;/span&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="deck-box"&gt;TEST
         &lt;div class="deck-hidden"&gt;
            &lt;span class="glyphicon glyphicon-eye-open eye-open" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-pencil pencil" aria-hidden="true"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-remove remove" aria-hidden="true"&gt;&lt;/span&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>When I hover over the div with the class name <code>deck-box</code> I want the div with the class name <code>deck-hidden</code> to become visible.</p>
  
  <p>The problem is I do not know how many <code>deck-box</code> divs there will be. So I can not give them all a different ID name.</p>
  
  <p>How can I hover over a <code>deck-box</code> and have its respective child <code>deck-hidden</code> be visible?</p>