Efectos hover con javascript
Problema:
Cambiar aspecto de un elemento al pasar el ratón por encima, con Javascript
El efecto rollover o hover es el cambio que se observa en un elemento de la página web cuando el ratón pasa por encima.
Puede programarse con un script.
Solución
Usar el gestor de eventos y el atributo style del elemento html
El efecto rollover hace uso de los eventos mouseover (o mousenter) y mouseout. Puede hacerse con CSS, pero esta solución se implementa con Javascript.
mouseover (mouseenter) se dispara cuando el ratón entra en un elemento (un enlace)
mouseout se dispara cuando el ratón sale de un elemento o bloque HTMLenlace y el segundo cuando lo abandona.
Podemos vincular cada evento a una función que cambie el atributo que nos interese: el color, el tipo de letra, la imagen, etc.
Ejemplo
En este sencillo ejemplo vamos a cambiar el color del texto contenido en el enlace, para lo cual usamos la función cambiar como gestor del evento
function cambiarColor(e)
{
if(e.type=="mouseover")
e.currentTarget.style.color = 'red';
else
e.currentTarget.style.color = 'red';
}
let lnk = document.getElementById('lnk');
lnk.addEventListener('mouseover', cambiarColor);
lnk.addEventListener('mouseout', cambiarColor);
Y en la página colocamos el enlace de la siguiente forma:
<a href="direccion.htm" id="lnk"> Texto del enlace </a>
Como ves la función pone un color rojo cuando el ratón está encima y azul cuando sale del enlace.
Es aplicable a enlaces o a cualquier otro elemento HTML de la página web