<!DOCTYPE html>
<body style="margin: 0; padding: 0;">
<div style="position: absolute; overflow: hidden;
            left: 0; top: 0; width: 250px; height: 250px;
            background: green"
     id="greenbox">
  <div style="position: relative; left: 75px; top: 75px;
              width: 75px; height: 75px;
              background: green"
       id="redbox">
  </div>
  <script>
    var redbox = document.getElementById('redbox');
    redbox.onmouseover = function() { redbox.style.background = 'red'; };
    redbox.onmouseout = function() { redbox.style.background = 'green'; };
  </script>
</div>