Pop up message on mouseover div

Trying to get a simple popup to appear on mouseover a div I followed the answer Description Box using "onmouseover" but it doesn't work. What am I missing?

<!DOCTYPE html>
<head>
<style>
    .parent .popup {
      display: none;
    }
    .parent:hover .popup {
      display: block;
    }
</style>
</head>

<body>
<script type="text/javascript">
    var e = document.getElementById('#parent');
    e.onmouseover = function() {
      document.getElementById('popup').style.display = 'block';
    }
    e.onmouseout = function() {
      document.getElementById('popup').style.display = 'none';
    }
</script>


<div id="parent">
    This is the main container.
    <div id="popup" style="display: none">some text here</div>
</div>

</body> 
</html>

Solution

There are a few problems. You are referencing classes in the CSS (. is class and # is id) second, you don't need to overload the CSS display none style. Finally, you don't need the JavaScript in this case.

See the working example.

<!DOCTYPE html>
<head>
<style>
    #parent #popup {
      display: none;
    }
    #parent:hover #popup {
      display: block;
    }
</style>
</head>

<body>


<div id="parent">
    This is the main container.
    <div id="popup">some text here</div>
</div>

</body> 
</html>