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.


<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de JavaScript</title>
  <meta charset="UTF-8">
</head>
<body>

  <h1 id="titulo">Titulo principal</h1>

<script>
  addEventListener('DOMContentLoaded',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>
  
</body>
</html>


Retornar al menu