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.
Para probar estos dos eventos implementaremos una página que contenga tres botones y cuando ingrese la flecha del mouse al botón cambiaremos el color de texto del mismo, retornando el color original cuando retiramos la flecha del control.
pagina.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
</head>
<body>
<input type="button" name="boton1" value="boton 1" onmouseover="entrada(this)" onmouseout="salida(this)">
<br>
<input type="button" name="boton2" value="boton 2" onmouseover="entrada(this)" onmouseout="salida(this)">
<br>
<input type="button" name="boton3" value="boton 3" onmouseover="entrada(this)" onmouseout="salida(this)">
<script src="funciones.js"></script>
</body>
</html>
funciones.js
function entrada(objeto) {
objeto.style.color = '#f00'
}
function salida(objeto) {
objeto.style.color = '#000'
}
Podemos observar que inicializamos las dos propiedades en cada botón:
<input type="button" name="boton1" value="boton 1" onmouseover="entrada(this)" onmouseout="salida(this)">
Luego en la función entrada modificamos la propiedad style del control:
function entrada(objeto) {
objeto.style.color = '#f00'
}
Es decir modificamos dinámicamente la hoja de estilo asociada a dicho control.
De forma similar en la función salida regresamos el color del texto del botón al color original (negro)