Eventos onmouseover, onmouseout

Los eventos onmouseover y onmouseout están generalmente unidos. El primero se dispara cuando ingresamos la flecha del mouse a un elemento HTML y el segundo cuando sacamos la flecha del control. De forma similar al evento onclick podemos pasarle como parámetro la referencia del objeto que emite el evento.

Evento onmouseover

El evento onmouseover ocurre cuando el puntero del mouse se mueve sobre un elemento o sobre uno de sus elementos secundarios.
Consejo: este evento se usa a menudo junto con el evento onmouseout , que ocurre cuando un usuario mueve el puntero del mouse fuera de un elemento.

Sintaxis

<element onmouseover="myScript">

Evento onmouseout

El evento onmouseout ocurre cuando el puntero del mouse se mueve fuera de un elemento o fuera de uno de sus elementos secundarios.
Sugerencia: Este evento se usa a menudo junto con el evento onmouseover , que ocurre cuando el puntero se mueve a un elemento o a uno de sus elementos secundarios.

Sintaxis

<element onmouseout="myScript">
Ejemplo

<!DOCTYPE html>
<html>
<body>
<p>Este ejemplo demuestra cómo asignar un evento "onmouseover" y "onmouseout" a un elemento h1.</p>
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">El Mouse esta sobre el texto</h1>
<script>
function mouseOver() {
  document.getElementById("demo").style.color = "red";
}

function mouseOut() {
  document.getElementById("demo").style.color = "black";
}
</script>
</body>
</html>