Efecto rollover

Se trata de un sencillisimo efecto rollover: cambio producido al pasar el ratón por un elemento.

En el ejemplo se muestra su uso para cambiar el color de fondo pero podría usarse para cualquier otro cambio.

Solución

<script>

function cambProp(obj, prop, valor){

   let span

   (span=document.getElementById(obj))

   span.style[prop]= valor;

}

</script>

<body>

<a href="pagina.htm"

onmouseover="cambProp('enlace', 'backgroundColor', 'yellow')"

onmouseout="cambProp('enlace', 'backgroundColor', 'transparent')">

<span id='enlace' >

rollover

</span>

</a>

Explicación

Un script super simple que muestra como cambiar el aspecto de un elemento con un simple evento del ratón (mouseover, mouseout)

Es una función ligada a dos eventos del ratón en relación al bloque span con id = enlace

onmouseover: ratón pasando por encima, pone el color de fondo en amarillo

onmouseout: ratón saliendo del bloque, pone su fondo en transparente

La función simplemente encuentra el bloque por su if y le acmabia la propiedad que se le de en el argumento por el valor que también se indica en el argumento

En lugar del id se podría usar el objeto event.target para saber a que bloque se refiere el evento.

Como lo uso

Es tan fácil como crear un bloque que queremos que tenga el efecto rollover.

Asignarles los eventos mouseover y mouseout a la función cambProp() con los valores que se quierean usar, en este caso es el color de fondo (backgrounColor) y el valor amarillo o transparente según el ratón entre o salga del bloque.

Evidentemente estos cambios se puede hace con el selector :hover mediante estilos CSS. Aquí tiene l forma de hacerlo en Javascript para que explores las posibilidades de este script que podrías usar para cambiar una imagen o un contenido....