Eventos: mouseover y mouseout

PROBLEMA

  1. Mostrar un elemento de tipo H1, luego cuando se ingrese con el mouse dentro del mismo cambiar el color a letra roja y color de fondo amarillo, luego cuando se mueva la flecha del mouse fuera del elemento volver al color original.
Solución 
Problema 1.


<html>
<head>

<script type="text/javascript">

  addEventListener('load',inicio,false);

  function inicio()
  {
    document.getElementById('titulo').addEventListener('mouseover',entrada,false);
    document.getElementById('titulo').addEventListener('mouseout',salida,false);
  }

  function entrada()
  {
    document.getElementById('titulo').style.color='#ff0000';
    document.getElementById('titulo').style.backgroundColor='#ffff00';
  }

  function salida()
  {
    document.getElementById('titulo').style.color='#000000';
    document.getElementById('titulo').style.backgroundColor='#ffffff';
  }

</script>

<style>
body {
  background:#ffffff;
}
</style>

</head>
<body>
<h1 id="titulo">Titulo principal</h1>
</div>

</body>
</html>


Retornar al menu