Então coloquei a pagina aqui para ver como ficava o htm e entendi seu problema, como te disse estou começando. Fiz um esboço aqui usando addEventeListener(movemouseout, e o mouseouver em uma variável do tipo Div html, acho que pode te ajudar clarear uma maneira de ter o evento e um estilo posicionando o tamanho.
a.addEventListener("mouseout",clicar);
a.addEventListener("mouseover",enter);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id= "Area" class="shadowbox">
interaja....
</div>
<style>
.shadowbox {
width: 15em;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
}
</style>
<script>
var a = window.document.getElementById("Area");
a.addEventListener("mouseout",clicar);
a.addEventListener("mouseover",enter);
function clicar(){
a.innerText ="click"
a.style.background = "black"
}
function enter(){
a.innerText ="entrar"
a.style.background = "red"
}
</script>
</body>
</html>