title: Pop up message on mouseover div
body: <p>Trying to get a simple popup to appear on <code>mouseover</code> a <code>div</code> I followed the answer <a href="https://stackoverflow.com/questions/3559467/description-box-on-mouseover">Description Box using &quot;onmouseover&quot;</a> but it doesn't work. What am I missing?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;style&gt;
      .parent .popup {
        display: none;
      }
      .parent:hover .popup {
        display: block;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
      var e = document.getElementById('#parent');
      e.onmouseover = function() {
        document.getElementById('popup').style.display = 'block';
      }
      e.onmouseout = function() {
        document.getElementById('popup').style.display = 'none';
      }
  &lt;/script&gt;
  
  
  &lt;div id="parent"&gt;
      This is the main container.
      &lt;div id="popup" style="display: none"&gt;some text here&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>