title: Show/hide div onmouseover/onmouseout Javascript
body: <p>I have a hyperlink on my page.  I want to show a div when I mouse over the hyperlink, and hide it when I mouseout.</p>
  
  <p>My html:</p>
  
  <pre><code>&lt;a onmouseover="showDiv(this)" onmouseout="hideDiv(this)"&gt;
      &lt;img&gt;
      &lt;div class="inner-block"&gt;
           Content
      &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function showDiv(elem) {
      elem.getElementsByTagName("div").style.visibility="visible";
  }
  
  function hideDiv(elem) {
      elem.getElementsByClassName("inner-block2").style.visibility="hidden";
  }
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>.inner-block {
      visibility: hidden
  }
  </code></pre>
  
  <p>I've tried getElementsByTagName, getElementsByClassName, whatever I try I get</p>
  
  <pre><code>Uncaught TypeError: Cannot set property 'visibility' of undefined
  </code></pre>