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 (:hover), pero esta solución se implementa con Javascript, que da más posibilidades..
mouseover (mouseenter) se dispara cuando el ratón entra en un elemento (un enlace o un div o un section etc)
mouseout se dispara cuando el ratón sale de un elemento o bloque HTML como el enlace el div o cualquier otro
Podemos vincular cada evento a una función que cambie el atributo que nos interese: el color, el tipo de letra, la imagen, etc. O bien le assigne otra clase.
Ejemplo
En este sencillo ejemplo vamos a cambiar el color del texto contenido en un 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