<!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>